Javascript: добавить новую строку в таблицу, пропустить элементы
Некоторое время назад я обнаружил следующую функцию javascript, которая позволяет динамически добавлять строки в таблицу:
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;
}
}
}
Кто-нибудь, кто на самом деле имеет опыт JavaScript (потому что у меня почти нет), который мог бы написать исправление, которое пропустит <th>
теги?
Вот часть таблицы, на которую я не хочу влиять:
<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>
Моя проблема в том, что когда у меня есть <th>
в тегах, строка заголовка в конечном итоге становится строкой, которая становится "клонированной", а не строкой, которая просто <td>
теги в нем.
2 ответа
Решение
Просто измените функцию, чтобы вы могли указать, какую строку вы хотите дублировать (с учетом индекса, начинающегося с нуля).
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;
}
}
}
Попробуй это:
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);
if(table.rows[0].cells[i].tagName != "th")
{
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;
}
}
else if(table.rows.length > 1 && table.rows[1].cells[i].tagName != "th")
{
newcell.innerHTML = table.rows[1].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;
}
}
}}