在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'); 
} 

函数addRow（）
{
var ptable=document.getElementById（'ptableQuestion'）；
var lastElement=ptable.rows.length；
var指数=lastElement；
var行=ptable.insertRow（lastElement）；
var cellLeft=行插入单元格（0）；
var textNode=document.createTextNode（索引）；
cellLeft.appendChild（textNode）；
var cellText=row.insertCell（1）；
var-element=document.createElement（'textarea'）；
element.name='question'+索引；
element.id='question'+索引；
element.rows=“2”；
element.cols=“60”
var cellText1=行insertCell（2）；
var element1=document.createElement（'input'）；
element1.type='checkbox'；
element1.name='cb'；
element1.id='cb'；
cellText.appendChild（元素）；
cellText1.appendChild（element1）；
document.getElementById（“psize”）.value=索引；
}
函数复选框（）{
var e=document.getElementsByName（“cb”）；
var message='您确定要删除吗？'；
var row_list={length:0}；
对于（var i=0；i0&&window.confirm（message））{
对于（第i行列表中的）{
如果（i='length'）{
继续；
} 
var r=行列表[i]；
r、 肺结核移除儿童（r.row）；
} 
}如果（row_list.length==0）{
警报（“您必须选择要删除的电子邮件地址”）；
} 

}

添加新人员
1.

---

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

这看起来像是从列表中删除元素。您必须获取表中的所有行，并在删除操作完成后将所有行向后移动一步。

有一个小代码i，我已在每个td中创建了一个spn。因此，我将替换ITeration中的值。如果你删除了3（1,2,3,4,5），那么span的内容将是1,2,3,4

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

        });
    }
});

---

希望它能为您工作。

yaya更正我添加的内部复选框函数（var j=0；j

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

        });
    }
});