在Javascript中动态添加新表行答案

【问题标题】：Dynamically add new table row in Javascript在Javascript中动态添加新表行
【发布时间】：2011-05-10 01:19:34
【问题描述】：

我使用普通的 addRow 函数和 removeRow 函数来动态添加和删除表中的行。

function addRow()
{
  var ptable = document.getElementById('ptableQuestion');
  var lastElement = ptable.rows.length;
 var index = lastElement;
  var row = ptable.insertRow(lastElement);


 var cellLeft = row.insertCell(0);
 var textNode = document.createTextNode(index);
 cellLeft.appendChild(textNode);

  var cellText = row.insertCell(1);
 var element = document.createElement('textarea');
 element.name = 'question' + index;
 element.id = 'question' + index;
 element.rows="2";
 element.cols="60" 

 var cellText1 = row.insertCell(2);
 var element1 = document.createElement('input');
 element1.type = 'checkbox';
 element1.name = 'cb';
 element1.id = 'cb';

cellText.appendChild(element);
cellText1.appendChild(element1);
  document.getElementById("psize").value=index;
 }



  function checkCheckboxes() { 
var e = document.getElementsByName("cb"); 
var message  = 'Are you sure you want to delete?'; 
var row_list = {length: 0}; 

for (var i = 0; i < e.length; i++) { 
    var c_box = e[i]; 

    if (c_box.checked == true) { 
        row_list.length++; 

        row_list[i] = {}; 
        row_list[i].row = c_box.parentNode.parentNode; 
        row_list[i].tb  = row_list[i].row.parentNode; 
    } 
} 

if (row_list.length > 0 && window.confirm(message)) { 
    for (i in row_list) { 
        if (i == 'length') { 
            continue; 
        } 

        var r = row_list[i]; 
        r.tb.removeChild(r.row); 
    } 
} else if (row_list.length == 0) { 
    alert('You must select an email address to delete'); 
}

}

<form action="show.jsp" method="post" onsubmit="return validate();">
<input type="hidden" name="psize" id="psize">
<table style="border:1px solid #000000;" bgcolor="#efefef"
    id="ptablePerson" align="center">
  <tr>
    <th colspan="3">Add New Person</th>
</tr>
<tr>
        <td>1</td>
        <td><input type="text" name="person1" id="person1" size="30" />
    <input type="button" value="Add" onclick="addRow();" /></td> 
    <td><input type="checkbox" id="cb" name="cb"/></td>

</tr>
</table>
<table align="center">
<tr>
    <td><input type="button" value="Remove" onclick="checkCheckboxes();" />
    <input type="Submit" value="Submit" /></td>
    </tr>
  </table>
  </form>
  </BODY>
   </HTML>

我的问题是当表格有 5 行时，如果我单击复选框删除第 3 行，则索引变为 1 2 4 5。有什么方法可以将其重新排列为 1 2 3 4

【问题讨论】：

标签： javascript html html-table

【解决方案1】：

这看起来像是列表中的简单删除元素。需要获取表的所有行，并且在删除操作完成后将所有行后移一步。

【讨论】：

yaya 在我添加的复选框函数中正确 for(var j = 0; j

【解决方案2】：

有一个小代码，我在每个 td 中创建了一个 spn。所以我将替换迭代中的值。如果你删除了 3(1,2,3,4,5) 它将起作用，那么 span 的内容将是 1,2,3,4 .Jquery 我在这里使用

 var rowCount = $('#ptableQuestion tr').length;
    if (rowCount != 0) {
        i = 0;
         $('#ptableQuestion tr').each(function(i) {
            $(this).find("td .spn").html(i);

        });
    }
});

希望它对你有用。

【讨论】：