Question

我使用普通的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

Answer 1

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

Answer 2

有一个小代码我在每个td中创建了一个spn。所以我将替换iterartion中的值。它会工作，如果你删除3（1,2,3,4,5）然后跨度的内容将是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);

        });
    }
});

希望它对你有用。

在Javascript中动态添加新表行

2 个答案: