Dhtml Control Table With Javascript

We can control dhtml table with the following javascript methods

Basic tasks

// first table
var tbl = document.getElementsByTagName("table").item(0);
 
// row count
var tbl = document.getElementsByTagName("table").item(0);
var rows = tbl.rows.length; 
 
// col count
var tbl = document.getElementsByTagName("table").item(0);
var cols = tbl.rows[0].cells.length;
 
// content
var tbl = document.getElementsByTagName("table").item(0);
var value = tbl.rows[0].cells[0].innerText;
 
// content of first child
var value = tbl.rows[0].cells[0].firstChild.innerText;

Copy Row with copy node

var tab = document.getElementById('myTable');
var root=tab.getElementsByTagName('tr')[0].parentNode;//the TBODY
var clone=tab.getElementsByTagName('tr')[0].cloneNode(true);//the clone of the first row
root.appendChild(clone);//appends the clone

copy row and add event

<script>
$(document).ready(function() {
    $("#table1 tr input:checkbox").live('click',function() {
        $('#table2').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
        $(this).parent().parent().remove();
    });         
 
    $("#table2 tr input:checkbox").live('click',function() {
        $('#table1').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
        $(this).parent().parent().remove();
    }); 
});
</script>

add new row

onClick=""AddRowToTable(event, this, 'table' )
 
function AddRowToTable(event, element, tagname)
{
    tagname = tagname.toLowerCase();
    var parentElement;
    while((element = element.parentNode) && !parentElement) 
    {
        if (element.tagName.toLowerCase() == tagname) 
        {
            parentElement = element;
        }
    }
 
    var tbl = document.getElementById(parentElement.id);
 
    var lastRow = tbl.rows.length;
    // if there's no header row in the table, then iteration = lastRow + 1
    var iteration = lastRow;
    var row = tbl.insertRow(lastRow);
 
    var cellRightSel = row.insertCell(0);
    var sel = document.createElement('select');
    sel.name = 'selRow' + iteration;
    sel.options[0] = new Option('text zero', 'value0');
    sel.options[1] = new Option('text one', 'value1');
    cellRightSel.appendChild(sel);
 
    //right cell
    var cellRight = row.insertCell(1);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txtRow' + iteration;
    el.id = 'txtRow' + iteration;
    el.size = 40;
    cellRight.appendChild(el);
 
    var cellbutton = row.insertCell(2);
    var but = document.createElement('image');
    but.type = 'button';
    but.name = 'txtRow' + iteration;
    but.id = 'txtRow' + iteration;
    but.size = 40;
    cellbutton.appendChild(but);
 
}

Reference:
http://stackoverflow.com/questions/6529690/copy-html-table-row-and-append-in-other-table

Change color and text

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>table sample</title>
<style type="text/css">
table, th, td {
  border: 1px solid orange;
  border-spacing: 0;
}
</style>
<script language="JavaScript" >
window.onload = function() {
   var tbl = document.getElementsByTagName("table").item(0);
 
   var rows = tbl.rows;
   for (var i=0, len=rows.length; i<len; i++) {
     var cols = rows[i].cells.length;
     for (var j=0; j<cols; j++) {
       rows[i].cells[j].innerText = "foo";
       rows[i].cells[j].style.backgroundColor = "orange";
     }
   }  
}
</script>
</head>
<body>
<h1>table/h1>
<table>
<thead>
<tr>
<th>th1</th>
<th>th2</th>
</tr>
</thead>
<tbody>
<tr>
<td>td1</td>
<td>td2</td>
</tr>
</tbody>
</table> 
</body>
</html>

reference:
http://d.hatena.ne.jp/replication/20100209/1265734486