Awhile back, I found the following javascript function that allows you to dynamically add a row to a table:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
Does anyone, that actually has javascript experience (cause I have almost none) that could write a fix that will skip over the <th>
tags?
Here's the part of the table I don't want to be affected:
<table id="scheduler">
<tr>
<th scope="col">Engineer</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
My problem is that when I have the <th>
tags in, the header row ends up being the row that gets "cloned", not the row that just has <td>
tags in it.
Just change the function so you can specify which row you want to duplicate (given a zero-based index).
addRow( "scheduler", 1 ); // to base it on the 2nd row
// give row number------v
function addRow(tableID, num) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
// -------------------------v
var colCount = table.rows[ num ].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
//-------------------------------v
newcell.innerHTML = table.rows[ num ].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}