Dhtml Control Table With Javascript
Table of Contents
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