Hide Columns in Table

To hide or show table columns, first we get a reference to the table

var table = document.getElementsByTagName("table")[0];

Then we get a reference to the rows collection:

var rows = table.rows;

Let's say we want to hide the first column in the table. We iterate through each row and set the display property of the first element in the cells collection to none.

for(var i=0; i< rows.length; i++){
 rows[i].cells[0].style.display='none';
}

To show a particular column, we would set the display property to blank.

for(var i=0; i< rows.length; i++){
 rows[i].cells[0].style.display='';
}

DOM Hyperlinks

First, here is the code. Then I'll explain it:

 var link  = document.createElement("A");
 link.href = "http://www.google.com";
 var atext = document.createTextNode("Google");
 link.appendChild(atext);
 oElement.appendChild(link);

First, you create an HTMLAnchorElement using a DOM method createElement(tagName).

var link  = document.createElement("A");

Then, you set the href property of the HTMLAnchorElement:

link.href = "http://www.google.com";

Next, you create a text node that will hold the clickable text:

var atext = document.createTextNode("Google");

Then, append the text node to the HTMLAnchorElement:

link.appendChild(atext);

Now, you can append the link element to another element on the page:

oElement.appendChild(link);

oElement holds a reference to an HTML element on the page that will be a parent of the newly created hyperlink.
Here is the same code presented as a function that accepts 3 parameters: parent element, url and link text:

function createLink(parent, url, linkText){
 var link  = document.createElement("A");
 link.href = url;
 var atext = document.createTextNode(linkText);
 link.appendChild(atext);
 parent.appendChild(link);
}

Check Radio Button State

If you have radio buttons and one of the buttons is checked by default, you may need to check if the buttons state has been changed, and only then proceed with form submission. Suppose you have a group of radio buttons named 'cities':

<input type="radio" name="cities" value="Paris"> Paris<br>
<input type="radio" name="cities" value="London" checked> London<br>
<input type="radio" name="cities" value="Berlin">Berlin<br>

Here is a JavaScript function that will return true if a radio button value has been changed, and false if not. We assumed that the form name is frm1.

function checkRadioButtons(){
 var rr = document.frm1.cities;
 var len = rr.length;
 while(len-->0){
  if(rr[len].checked !=rr[len].defaultChecked)
   return true;
 }
 return false;
}

Radio buttons and checkboxes have a defaultChecked property which reflects the initial state of an element's checked attribute. The code loops through each radio button and checks whether the current checked property is equal to the defaultChecked property of an element, in which case it means that the element state has been changed.
This function is called on form submit as follows: 'return checkRadioButtons()'. If the function returns true, the form submission takes place. If the function returns false, nothing happens.

Highlight All Links on a Web Page

The following JavaScript code will highlight each html link on a web page when you hover your mouse over it.

Get an array of all html links on a web page:

 var aa = document.getElementsByTagName('a');

Loop through the array and assign anonymous functions on mouseover and mouseout events:

    for(var i=0; i<aa.length; i++){
        aa[i].onmouseover = function () {this.style.backgroundColor='#cc0000'}
        aa[i].onmouseout = function () {this.style.backgroundColor='#ffffff'}
    }

The above code works and is fine. However, there is a better and shorter solution that does not require JavaScript and uses CSS. Here is how you do it. In your CSS file, include the following declaration :

 a:hover {background-color:#cc0000;}

A JavaScript endsWith function

The following JavaScript function checks whether a string ends with a specified string.

function endsWith(str, s){
 var reg = new RegExp (s + "$");
 return reg.test(str);
}

The first argument is a string to be checked, the second one is a suffix to find. It returns true if the string ends with a specified string, and returns false if it does not. We use a "$" anchor to match the end of the string. The function is case-sensitive. Example:

var str="teens";
alert(endsWith(str, "ns"));

If you want to make the function into a method that could be used by all variables of a string type, you could use an object's prototype property:

String.prototype.endsWith = function(s){
 var reg = new RegExp(s + "$");
 return reg.test(this);
}

Then, you would use the function as follows:

alert(str.endsWith("ns"));

A JavaScript startsWith function

The previous function used the "$" anchor to match the end of a string. To match the start of a string, JavaScript regular expressions use a "^" (caret) anchor. This information allows us to write a function that would match the beginning of a string:

function startsWith(str, s){
 var reg = new RegExp("^" + s);
 return reg.test(str);
}

A Script That Remembers Values Typed into a Text Box

HTTP cookies can be used both for server-side and client-side programming. There are many ways to use cookies in Javascript. In this short tutorial we will concentrate on the client-side. The task is to build a script that will remember values users type in a text box and display them next time the users access the page.
Let's say we have a form with an input box "project" and a submit button. We want to capture the values entered by the user and save them for later use. Cookies seem to be an ideal solution to this problem. No server-side programming or maintenance.
A working example is located here .
We'll need two functions to read and set cookies. They are pretty much standard and can be easily found on the web.
Let's start with a function that sets the cookie.

function setCookie (name, value, expires,
  path, domain, secure) {
     document.cookie =
      name + "="
      + escape(value)
      + ((expires) ? "; expires="
      + expires.toGMTString() : "")
      + ((path) ? "; path=" + path : "")
      + ((domain) ? "; domain=" + domain : "")
      + ((secure) ? "; secure" : "");
}

The parameters to the function are self-explanatory:

name is the cookie name we are going to use

value is the cookie's value

expires - a date that the cookie will expire.

The path sets the top level directory from which a cookie can be read.
Set the path of a cookie to the top-level directory of your Web pages, and the cookie is readable by all your Web pages.
To get a cookie value we'll use the following function:

 function getCookie(name) {
  // break cookie into array of bites
   var bites = document.cookie.split("; ");
    for (var i=0; i < bites.length; i++) {
     // break into name and value 
      nextbite = bites[i].split("=");
      // if name matches 
      if (nextbite[0] == name)
      // return value 
       return unescape(nextbite[1]);
    }
    return null;
 }
 

Let's write a function that would add values to the existing cookie. 2 arguments will be passed to the function: cookieName and formField.
First, let's get the value typed by the user:
Now, we'll set the expiry date to 30 days from today.:

Get the contents of the cookie using the getCookie function:
var contents= getCookie(cookieName);
Add the new value typed by the user to the existing cookie contents.
We chose to separate values by a period. You can use any other separators.
The last thing to do is to send the new cookie contents to our setCookie function:
Here is the full listing of the function:

function addString(cookieName, formField){
 var field = eval ("document.forms[0]."+ formField);
 var txtVal =field.value;
 var expires = new Date();
 expires.setDate(expires.getDate() + 30);
 var contents= getCookie(cookieName);
 if(contents != null && contents.indexOf(txtVal)<0)
  contents+="."+txtVal;
 else if(contents == null)
  contents = txtVal;

 setCookie(cookieName, contents, expires,"/");
}

We'll call this function from the onSubmit event of the form, like this:
<form onSubmit='addString ("example","txt1")'>
Now, the only thing to do is to write the contents of the cookie on the HTML page.
Here is the function that does it:

function writeCookieValues (val) {
 if(val!= null && val.length>0){
  var str = new String(val);
 //split the resulting array by a separator
 //used earlier in the addString function
 var aPr = str.split(".");
 for(var i=0; i < aPr.length; i++)
  document.write(aPr [i]+"<br>");
 }
}

Use it like this:
<script language='JavaScript'> writeCookieValues (getCookie("example")); </script>

A JavaScript Function that Allows Only Numbers

This little function will force users to type numbers, commas and periods only.

 function noAlpha(obj){
 reg = /[^0-9.,]/g;
 obj.value =  obj.value.replace(reg,"");
 }

reg = /[^0-9.,]/g is a regular expression that basically says: look for any numbers from 0 to 9, periods and commas globally.
Usage:
<input type=text onKeyUp='noAlpha(this)' onKeyPress='noAlpha(this)'>

Try it here.


Here is a version of this function that does not use regular expressions and allows numbers only.

function forceNumbers(obj) {
 if ( obj.value.length == 0)
  return;

 if (!parseInt(obj.value,10) && obj.value != 0)   {
  alert("Please enter a valid Number");
  obj.value = '';
  obj.focus();
  obj.select();
 }
 else {
  obj.value = '' + parseInt(obj.value,10);
 }
}