javascript - 在Javascript中动态添加新表行

我使用普通的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 45。是否有任何方法可以将其重新排列为1 2 3 4

最佳答案

这看起来像列表中的简单delete元素。您必须获取表的所有行，并在删除操作完成后将所有行向后移一个后退字。

关于javascript - 在Javascript中动态添加新表行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4181562/