操作动态用户输入表的意外行为

Question

我正在尝试从动态用户输入表中删除已检查的行，但它永远不会起作用。这是代码

function addRow(tableID){
  var table=document.getElementById(tableID);
  var rowCount=table.rows.length;
  if(rowCount<5){
    var row=table.insertRow(rowCount);
    var colCount=table.rows[0].cells.length;
    for(var i=0; i<colCount; i++){
      var newcell=row.insertCell(i);
      newcell.innerHTML=table.rows[0].cells[i].innerHTML;
      }
    }else{
      alert("Maximum number of extra data is 5.");
    }
}


function deleteRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  for(var i=0; i<rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if(null != chkbox && true == chkbox.checked) {
      if(rowCount <= 1) {       
        alert("Cannot remove all.");
        break;
      }
      table.deleteRow(i);
      rowCount--;
      i--;
    }
  }
}

<p>
  <input type="button" value="Add Option" onClick="addRow('dataTable')"/>
  <input type="button" value="Remove Option" onClick="deleteRow('dataTable')"/>
  <table id="dataTable" >
    <tbody>
      <tr>
        <p>
          <td>
            <input type="checkbox"  required="required" name="chk[]" checked="checked" />
          </td>
          <td>
            <label>Name of Data:</label>
            <input type="text" name="dataName">
          </td>
          <td>
            <label>Data:</label>
            <input type="text" name="data">
          </td>
        </p>
      </tr>
    </tbody>
  </table>

添加功能正常，但删除功能不起作用。有人能告诉我发生了什么吗？

Answer 1

你快完成了。

有一些问题：

<td>之后和<input>之前有空格。所以，你的<input>成了第二个孩子：

<td>
                            <input type="checkbox"  required="required" name="chk[]" checked="checked" /></td>

应该是：

<td><input type="checkbox"  required="required" name="chk[]" checked="checked" /></td>

否则，您可以将childNodes[0]更改为childNodes[1]。

另外，为什么<p>之前和之后有<td>？删除它们。

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount < 5) {
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    } else {
        alert("Maximum number of extra data is 5.");
    }
}


function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for (var i = 0; i < rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if (null != chkbox && true == chkbox.checked) {
            if (rowCount <= 1) {
                alert("Cannot remove all.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

<input type="button" value="Add Option" onClick="addRow('dataTable')" />
<input type="button" value="Remove Option" onClick="deleteRow('dataTable')" />
<table id="dataTable">
    <tbody>
        <tr>
            <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
            <td>
                <label>Name of Data:</label>
                <input type="text" name="dataName"> </td>
            <td>
                <label>Data:</label>
                <input type="text" name="data"> </td>
        </tr>
    </tbody>
</table>

Answer 2

这些都是很好的答案，但更好的是将undefined variable替换为.childNodes[0]，因为您只对元素感兴趣，这样您就不必担心空间和其他偷偷摸摸的东西像那样。您可以在此处阅读：What is the difference between children and childNodes in JavaScript?

Answer 3

从

进行了更改

var chkbox = row.cells[0].childNodes[0];

到

var chkbox = row.cells[0].childNodes[1];

现在正在运作。

function addRow(tableID){
	var table=document.getElementById(tableID);
	var rowCount=table.rows.length;
	if(rowCount<5){
		var row=table.insertRow(rowCount);
		var colCount=table.rows[0].cells.length;
		for(var i=0; i<colCount; i++){
			var newcell=row.insertCell(i);
			newcell.innerHTML=table.rows[0].cells[i].innerHTML;
			}
		}else{
			alert("Maximum number of extra data is 5.");
		}
}


function deleteRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	for(var i=0; i<rowCount; i++) {
		var row = table.rows[i];
		var chkbox = row.cells[0].childNodes[1];
		if(null != chkbox && true == chkbox.checked) {
			if(rowCount <= 1) { 			
				alert("Cannot remove all.");
				break;
			}
			table.deleteRow(i);
			rowCount--;
			i--;
		}
	}
}

	<p>
			<input type="button" value="Add Option" onClick="addRow('dataTable')"/>
			<input type="button" value="Remove Option" onClick="deleteRow('dataTable')"/>
			<table id="dataTable" >
				<tbody>
					<tr>
					<p>
					<td>
							<input type="checkbox"  required="required" name="chk[]" checked="checked" /></td>
					<td>
					<label>Name of Data:</label>
					<input type="text" name="dataName">
					</td>
					<td>
					<label>Data:</label>
					<input type="text" name="data">
					</td>
					</p>
					</tr>
					</tbody>
					</table>