JavaScript Tips

Toggle Enabled State on Submit Button from Checkbox with jQuery

2015-05-08T05:33:00.000-07:00

$("#myCheckBox").change(function () {
        $("input[type='submit']").prop("disabled", !this.checked);        
    });

How to Change HTML Table Cell Value

2014-03-21T13:30:00.000-07:00

First, we need to get a reference to a table cell value.


var table = document.getElementById('myTableId');

An HTMLTableElement has a rows property that refers to the table rows collection. An HTMLTableRowElement has a cells property that refers to the row cells collection.

With this information at hand it is easy to get a reference to any cell.

Let's say, we need to refer to the first column of the first row.

Since the collection index starts at 0 we can get this reference using the following code:


var cell = table.rows[0].cells[0];

The cell variable now refers to the cell in the first column and first row.
The data in the table cell is represented by a text node. We can get a reference to it by using the firstChild property of an HTMLElement.

We obtain a reference to the text node value by using its data property.


var value = cell.firstChild.data;

Now it is easy to change the text in a table cell:


cell.firstChild.data = 'my new text';

What if you have an HTML object in your data cell, like a radio button ? In this case, 'firstChild' property will refer to this object, and you can get all the properties of the object by referring to the cell's firstChild property, e.g:


cell.firstChild.value 
cell.firstChild.name
cell.firstChild.type

Change table cell value automatically

To change a table cell value automatically we must assign an event handler to the cell onblur event.

For DOM scripting, I would recommend an excellent book on the subject by Jeremy Keith DOM Scripting: Web Design with JavaScript and the Document Object Model. It will teach you to work with DOM and JavaScript from the ground up.

Some other posts you might find interesting:

How to Hightlight Table Rows

Extract Table Text

Format Number with a Thousand Separator

2012-09-23T10:03:00.001-07:00

Here are a couple of helpful functions to work with number.
The first one formats a number with a thousand separator. A comma is used as a thousands separator.

function format(obj){
  var str = obj.toString();
  var re=/(-?\d+)(\d{3})/;
  while(re.test(str)){
   str=str.replace(re,'$1,$2')
  }
  return str;
}

This one removes formatting:

function deformat(str){
 var re = /,/g;
   return str.replace(re,'');
}

Extract Table Text

2012-05-01T12:38:00.001-07:00

The following recursive function can be used to extract text from any HTML element including a table.

var cnts= '';
function getElementText(el){
 var cn=el.childNodes,i;
 if(el.nodeType==3){
     cnts += (el.nodeValue + "\n");
 }
 for(i=0;i<cn.length;++i)
   getElementText(cn[i]);
}

The function accepts an HTML object as a parameter. First it checks for the nodeType property of the DOM element. If the nodeType value is 3 (TEXT_NODE) the function grabs the element text (nodeValue) and appends it to the global variable cnts. As the final step the function calls itself supplying each element child as the parameter. The only downside I see is using a global variable to hold the element contents. But so far I don't see any other way to achieve the same functionality.

An interesting article about anonymous recursive functions can be found here.

Another post you might find interesting: Hide Columns in a Table

Edit Table Cell in Place

2012-03-29T09:59:00.000-07:00

Let's create a function that will get a reference to a table cell as a parameter, and make the table cell editable. In other words, create Edit In Place. Our function will be very simple, and use only standard DOM methods. It will be called by clicking on the table cell.

 function makeEditable(el){
 }

The el variable will hold a reference to a table cell. Normally, a table cell will have one childNode - the text element. First we check whether this is the first click on the table cell:

  if(el.firstChild.nodeName !="INPUT"){
  }

If it is so, we create an input element:

 var input = document.createElement("INPUT");

Assign the value of the cell text to the input element and set different background:

 input.value = el.firstChild.nodeValue;
   input.style.background = "rgb(255,244,255)";

Turn autocomplete off to avoid the 'Permission denied to set property XULElement.selectedIndex' error in Firefox.

 input.setAttribute('autocomplete','off');

Replace the text with the input element we just created and set focus on it:

  el.replaceChild(input, el.firstChild);
  el.firstChild.select();
  el.firstChild.focus();

To turn the input element back into text, we'll do the reverse procedure - create a text node, and replace the input element with text:

 var text= document.createTextNode(el.firstChild.value);
 el.replaceChild(text, el.firstChild);

The function will called from a cell element as follows:

onclick=makeEditable;

Once a user turned the input back into text, you could apply various Ajax techniques to save the modified text on the server.

Here is the full function listing:

function makeEditable(){
 var el = this;
 if(el.firstChild.nodeName !="INPUT"){
   var input = document.createElement("input");
    input.value = el.firstChild.nodeValue;
    input.setAttribute('autocomplete','off');
    input.style.background = "rgb(255,244,255)";
    el.replaceChild(input, el.firstChild);
    el.firstChild.select();
    el.firstChild.focus();
   }
   else{
    var text= document.createTextNode(el.firstChild.value);
  el.replaceChild(text, el.firstChild);
   }
 }

When the makeEditable function is called from a table cell, the keyword this in the function refers to the table cell element.

Unobtrusive JavaScript

There is a way to attach a function to the onclick event in each table cell without having to write inline code. Here is how to do it:

function addEventHandlers() {
  //the table should have an id
  var table = document.getElementById('example');
  var tds = table.getElementsByTagName('td');
  for(var i=0; i< tds.length; i++){
   //no brackets after the function name
   tds[i].onclick = makeEditable;
   tds[i].title = 'Click to edit';
  }
}

The last step is to make sure this function is called after a page has loaded:

window.onload = addEventHandlers;

-->

Related posts:

How to Change HTML Table Cell Value

Hide Columns in a Table

Delete Table Rows

2012-03-28T13:33:00.001-07:00

To delete selected rows from a table, obviously, we need to add checkboxes to every table row. When a checkbox is checked, it means that that particular row will be deleted. Also, we need some method by which we could identify a selected row. The value attribute of a checkbox is a very good candidate for that. It will equal a row index. As you know, row indices start at 0, so the value of first row checkbox will equal 0, the value of the second row checkbox will equal 1, and so on.
Now, we can write a function to be called from the Delete button:
First, we get a reference to the table:

var table = document.getElementById("myTable");

Then, we get a reference to the array of checkboxes in the table:

var checks = table.getElementsByTagName("input");

Normally, this array will contain all the inputs in the table, and we would have to use the type property to get a reference to desired elements. However, if we are sure that there are no other inputs in the table other than the checkboxes, we can skip this check.
Now, we iterate through all the checkboxes. If the checked property is true, we obtain the index of a row which is contained in the checkbox value property, and delete this row. Also, we have iterate backwards, because otherwise removing a row changes the subsequent row index by -1. Iterating backwards preserves our indices.

for(var i= checks.length-1; i>=0; i --){
 if(checks[i].checked){
  var indx =  checks[i].value;
  table.deleteRow(indx);
 }
}

The next step resets the values of the checkboxes to make sure that they correspond to the new row indices.

var checks = table.getElementsByTagName("input");
for(var i= 0; i < checks.length; i++){
 checks[i].value=i;
}

Here is the complete function listing :

function deleteRows(){
 var table = document.getElementById("myTable");
 var checks = table.getElementsByTagName("input");

 for(var i= checks.length-1; i>=0; i --){
  if(checks[i].checked){
   var indx =  checks[i].value;
   table.deleteRow(indx);
  }
 }
 var checks = table.getElementsByTagName("input");
 for(var i= 0; i < checks.length; i++){
  checks[i].value=i;
 }
}

Hide Columns in Table

2012-03-26T10:32:00.002-07:00

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

2012-03-26T10:26:00.004-07:00

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

2012-03-26T10:11:00.003-07:00

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

2012-03-26T09:53:00.002-07:00

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;}

2012-02-28T09:10:00.002-08:00

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

2012-02-24T10:56:00.001-08:00

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

2012-02-24T10:47:00.002-08:00

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);
 }
}

Top Rated Ajax Books

2011-06-23T13:44:00.000-07:00

All the books listed here have at least a 4 star rating and have been reviewed by at least 10 reviewers. Some reviews are included.

Ajax in Action
by Dave Crane, Eric Pascarello, Darren James
Best AJAX Book Available Today:
Ajax in Action by Dave Crane is the best Ajax book on the market today. With over 600 pages of content, this incredibly well-written text explains why Ajax is so powerful and how this simple programming feature (it really isn't difficult to learn at all) has changed web development forever. No longer are users and developers limited to a page reload world, as the power of this technology now has the ability to make the web work like regular applications. It's a trend that has been desired for a loooong time and boy does it ever deliver!!!
```
Chapter Overview:

01. Ajax background
02. Learning to use Ajax
03. Order with Ajax
04. Pages as applications
05. Serve role
06. User experience
07. Security and Ajax
08. Ajax performance
09. Dynamic double combo example
10. Type ahead example
11. Enhanced Ajax web portal
12. Live search using XSLT
13. Stand-Alone apps with Ajax
```
Professional Ajax (Programmer to Programmer) (Paperback)

by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett
The book does a good job academically of showing how Ajax has evolved (itself a debatable topic) and how it is used in modern-day applications. The book doesn't marry the reader to any one particular web development framework, effectively citing examples in PHP, .NET, and JavaServer Pages. Practically, the authors exhibit a proper mix of (X)HTML, CSS, JavaScript, Dynamic HTML and XmlHttpRequests, showing how the technologies are blended for developing next-gen UIs.
AJAX and PHP: Building Responsive Web Applications (Paperback)
by Cristian Darie, Bogdan Brinzarea, Filip Chereches-Tosa, Mihai Bucica
AJAX and PHP by Example:This book teaches by example. The first few chapters introduce AJAX and what part PHP, Javascript and XML all play. Then the remainder of the book takes you through several example applications. The example apps are simple enough that you can easily follow. These applications include Form Validation, Chat, Suggest and Autocomplete, Charting with SVG (Scalable Vector Graphics), using grids, and Drag and Drop.

Ajax For Dummies (For Dummies (Computer/Tech)) (Paperback)
by Steve Ph.D. Holzner

Good coverage with some unique features: Ajax is obviously one of the hot web technologies these days, and now we have the Dummies title that covers it... Ajax for Dummies by Steve Holzner. While it might be easy to write this off as "just another Dummies book", I don't know that I'd be so hasty...

Contents:
Part 1 - Getting Started: Ajax 101; It's All About JavaScript
Part 2 - Programming in Ajax: Getting to Know Ajax; Ajax in Depth
Part 3 - Ajax Frameworks: Introducing Ajax Frameworks; More Powerful Ajax Frameworks; Server-Side Ajax Frameworks
Part 4 - In-Depth Ajax Power: Handling XML in Ajax Applications; Working with Cascading Style Sheets in Ajax Applications; Working with Ajax and PHP
Part 5 - The Part of Tens: Ten Ajax Design Issues You Should Know About; Ten Super-Useful Ajax Resources

Highlight HTML Table Rows with JavaScript

2011-05-02T13:19:00.000-07:00

Highlight Table Rows on Mouseover

To highlight whole rows, use the following function:

function hiLiteRows(){
 var table = document.getElementById('myTable2');
 for (var i=0;i < table.rows.length;i++)
 {
  table.rows[i].onmouseover = function () {
   this.origColor=this.style.backgroundColor;
   this.style.backgroundColor='#BCD4EC';
  }
  table.rows[i].onmouseout = function () {this.style.backgroundColor=this.origColor;}
 }
}

We use a rows array to get access to table rows. The basic principle is as follows: the original background color is saved in a custom property of a row object to be restored on the mouseout event. The this keyword here refers to the row object.

-->

Highlight TableRows on Click Event

To highlight table rows on the click event, we modify the previous function:

function hiLiteRowsClick(){
 var table = document.getElementById('myTable3');
 for (var i=0;i < table.rows.length;i++){
  table.rows[i].onclick= function () {
   if(!this.hilite){
    this.origColor=this.style.backgroundColor;
    this.style.backgroundColor='#BCD4EC';
    this.hilite = true;
   }
   else{
    this.style.backgroundColor=this.origColor;
    this.hilite = false;
   }
    }
 }
}

Instead of the mouseover event, we use the onclick event to call the anonymous function.
The function will change the background color when a row is clicked for the first time. When a row is clicked again, the original color is restored. To keep track of the click sequence the function uses a custom property called hilite.
This property is set to true on the first click and set to false on the second one.

Related posts:

Hide columns in a table

Expand/collapse rows dynamically

A Simple Way to Highlight Table Cells with JavaScript

2011-05-02T13:11:00.000-07:00

Highlight Table Rows on Mouseover

To highlight whole rows, use the following function:

function hiLiteRows(){
 var table = document.getElementById('myTable2');
 for (var i=0;i < table.rows.length;i++)
 {
  table.rows[i].onmouseover = function () {
   this.origColor=this.style.backgroundColor;
   this.style.backgroundColor='#BCD4EC';
  }
  table.rows[i].onmouseout = function () {this.style.backgroundColor=this.origColor;}
 }
}

Highlight TableRows on Click Event

To highlight table rows on the click event, we modify the previous function:

function hiLiteRowsClick(){
 var table = document.getElementById('myTable3');
 for (var i=0;i < table.rows.length;i++){
  table.rows[i].onclick= function () {
   if(!this.hilite){
    this.origColor=this.style.backgroundColor;
    this.style.backgroundColor='#BCD4EC';
    this.hilite = true;
   }
   else{
    this.style.backgroundColor=this.origColor;
    this.hilite = false;
   }
    }
 }
}

Insert Backslash Before a Double Quote

2010-12-10T06:47:00.000-08:00

Sometimes, you need to dynamically write html text from JavaScript. If the text contains a combination of single and double quotes, you may run into problems. Here is a simple function to avoid those problems.

function insertBackslashBeforeDoubleQuote(str){
 var reg = /"/g;
 var newstr = '\\"';
 return str.replace(reg,newstr);
}

As you see, the function uses a RegExp object on the first line to look for a double quote:

reg = /"/g;

The second line defines our replacement string - \"
The backslash in front of the quote has to be escaped with another backslash.

newstr = '\\"';

The last line searches the string and if a double quote is found it is replaced by our newstr pattern.

return str.replace(reg,newstr);

Here is a similar function that inserts a backslash before a single quote if it is contained in the string argument.

function insertBackslashBeforeSingleQuote(str){
 var reg = /'/g;
 var newstr = "\\'"
 return str.replace(reg,newstr);
}

Some other posts:

A JavaScript endsWith function

Highlight HTML Table Rows with JavaScript

"Event is Not Defined" Error in Firefox

2010-11-17T06:04:00.000-08:00

This error may occur when you try to attach a JavaScript function dynamically to page elements and pass an event to the function. An example:

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {

    if (inputs[i].type == 'text') {

        inputs[i].onkeypress = function() { return isNumericKey(event); }

    }

};

Here is a listing of the validation function:

/* Numeric Validation */

function isNumericKey(evt) {

    var charCode = (evt.which) ? evt.which : event.keyCode;

    if (charCode >= 48 && charCode <= 57 || charCode == 46) {

        return true;

    }

    else {

        return false;

    }

}

This code will work perfectly in IE and it won't allow users to type any other characters than numeric. However, in Firefox, it will throw an error: "event is not defined".

First solution:

Check whether the event is defined in Firefox and attach a reference to the validation function.

if (typeof (event) == "undefined")

    inputs[i].onkeypress = isNegativeNumericKey;

else

    inputs[i].onkeypress = function() { return isNumericKey(event);}

In this case, the event is a global variable that does not exist in Firefox. We could have rewritten the type check as follows:

if (typeof (window.event) == "undefined") ...

Second solution:

Use the following version of the function call in Firefox by passing the event parameter to the function that handles the keypress event:

inputs[i].onkeypress = function(event) { return isNumericKey(event);}

But this would not work in IE. The solution: normalize the Event interface in the function body:

function(event) {  

   event = event || window.event;

   return isNumericKey(event); 

}

A Graph in Table Without Image

2009-12-09T13:00:00.000-08:00

Here is a simple script to add a graph to a table cell.

Each table row consists of 2 cells. The first cell contains a numeric value. For each row, in the second cell, the script creates a span with a width equal to the value in the first cell:

It assumes you set a style for a "graph" class. Alternatively, you could set background color in the script. Also, the maximum span width of 100 is assumed.

A side note: to create a rounded span in Firefox, use the following style for the "graph" class:
-moz-border-radius: 10px;

var tbl = document.getElementById('tbl');
for(var i=0; i<tbl.rows.length; i++){
var val = tbl.rows[i].cells[0].innerHTML;
var span = document.createElement("span");
span.style.width = val/100*100;
span.className = "graph";
var cell =tbl.rows[i].cells[1];
cell.style.textAlign= 'left';
cell.appendChild(span);
}

Enumerate Array or Object

2009-05-20T06:08:00.000-07:00

This is how you could enumerate properties of a JavaScript array:

var arr = ['a', 'b', 'c'];

for (var prop in arr)
alert (prop + ":"+ arr[prop]);

Result:
0:a
1:b
2:c

Expand/Collapse Rows Dynamically with DOM and JavaScript

2009-03-26T13:38:00.000-07:00

Suppose, you have a table structured as follows:

The first line for a new month is always a total of the project amounts. This structure comes from an sql query, using the Oracle GROUP BY CUBE clause. Would not it be nice to be able to see only the rows with intermediate totals, expanding this or that month if necessary.

Here is a set of JavaScript functions that collapses and expands table rows:

var tbl;

function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())
return el;
else
return getParent(el.parentNode, pTagName);
}


function toggleSection(lnk){

var td = lnk.parentNode;
var table = getParent(td,'TABLE');
var len = table.rows.length;
var tr = getParent(td, 'tr');
var rowIndex = tr.rowIndex;
var rowHead=table.rows[rowIndex].cells[1].innerHTML;

lnk.innerHTML =(lnk.innerHTML == "+")?"-":"+";
vStyle =(tbl.rows[rowIndex+1].style.display=='none')?'':'none';

for(var i = rowIndex+1; i < len;i++){
if (table.rows[i].cells[1].innerHTML==rowHead){
table.rows[i].style.display= vStyle;
table.rows[i].cells[1].style.visibility="hidden";
}
}
}

function collapseRows(){
tables =document.getElementsByTagName("table");
for(i =0; i < tables.length;i++){
if(tables[i].className.indexOf("expandable") != -1)
 tbl =tables[i];
}

if(typeof tbl=='undefined'){
 alert("Could not find a table of expandable class");
 return;
}

//assume the first row is headings and the first column is empty
var len = tbl.rows.length;
var link = '<a href="#" onclick="toggleSection(this);return false;">+ </a> ';

var rowHead = tbl.rows[1].cells[1].innerHTML;

for (j=1; j < len;j++){
 //check the value in each row of column 2
 var m = tbl.rows[j].cells[1].innerHTML;

 if(m!=rowHead || j==1){
  rowHead=m;
  tbl.rows[j].cells[0].innerHTML = link;
  tbl.rows[j].style.background = "#CCFF99";
 } 
 else
  tbl.rows[j].style.display = "none";
}
}

window.onload=collapseRows;

Let me briefly explain what the script does. When a page has loaded, the collapseRows function is called. It looks for a table with a class named 'expandable'. If such a table is found, a reference to the table is stored in a variable tbl, and the number of rows in the table is stored in a variable len.


var len = tbl.rows.length;

Then, we create a variable that holds an html link that will call the toggleSection function when linked. The function parameter will contain a reference to the link itself. We using the this keyword here.

var link = '<a href="#" onclick="toggleSection(this);return false;">+ </a> ';

The variable rowHead in the next statement will contain the text in the second column of the first row(not counting the table head). In this table it is January.


var rowHead = tbl.rows[1].cells[1].innerHTML;

The next piece of the code loops through each row, and if the text in the second column contains repeating information, it hides that row. Also, it assigns a different color to the first row with non-duplicate text.

for (j=1; j < len;j++){
 var m = tbl.rows[j].cells[1].innerHTML;
 if(m!=rowHead || j==1){
  rowHead=m;
  tbl.rows[j].cells[0].innerHTML = link;
  tbl.rows[j].style.background = "#CCFF99";
 }
 else
  tbl.rows[j].style.display = "none";
}

The next function, toggleSection, hides or collapses rows with duplicate months. As a parameter, the function accepts a reference to the link that calls the function. Using the link reference, we get a reference to the containing table cell, row, and then the row index for the cell:

var td = lnk.parentNode;
var tr = getParent(td, 'tr');
var rowIndex = tr.rowIndex;

We obtain text in the second column of that row (January or February, in this example):


var rowHead=table.rows[rowIndex].cells[1].innerHTML;



Next, we switch the text of the link from plus to minus or vice versa.


lnk.innerHTML =(lnk.innerHTML == "+")?"-":"+";



Then, we prepare a style to be used for the next rows.


vStyle =(tbl.rows[rowIndex+1].style.display=='none')?'':'none';



Then, we loop through the table, and if the text in the second column of each row is the same as the text in the same column of the row that contains the link, we hide or show that row depending on its initial state.



for(var i = rowIndex+1; i < len;i++){
if (table.rows[i].cells[1].innerHTML==rowHead){
 table.rows[i].style.display= vStyle;
}


We also hide the repeating text in the second column:


table.rows[i].cells[1].style.visibility="hidden";



Don't forget, the table must contain an empty first column to hold a plus or minus sign and have a class named 'expandable'.



See a demo here.



The script can be downloaded here.



Another post dealing with the HTML table :

Highlight Table Cells with JavaScript