在Javascript中動態添加新表行

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.So我將替換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);

        });
    }
});

希望它能為你效勞。