Question

我已经编写了一些代码来删除容器中的父表，其中选中了复选框。它适用于第一个元素。

但是当我尝试通过选中所有三个复选框来删除多个元素时，它会抛出错误 - elements[i] becomes undefined。

我已经看到了其他解决方案，但它们似乎并不完全适用于删除容器中所有选定表格的操作。

请让我知道，我做错了什么。

function deleteTables(tableClass,containerID){
	var container = document.getElementById(containerID);
	var elements = container.getElementsByClassName(tableClass);
	var tableCount = elements.length;
	for(var i=0; i<tableCount; i++) {
		var inputList = elements[i].getElementsByTagName("input");
		var inputListCount = inputList.length;
		for(var x=0; x<inputListCount; x++) {
			if (inputList[x].type == "checkbox" && inputList[x].checked == true)
			{
				container.removeChild(elements[i]);
				break;
			}
		}
	}
}

<INPUT type="button" value="Delete Table" onclick="deleteTables('dataTable','test_div')" />

<DIV id="test_div">
  <TABLE class="dataTable" width="350px" border="1">
    <TR>
      <TD><INPUT type="checkbox" name="chk[]"/></TD>
      <TD><INPUT type="text" name="txtA[]"/></TD>
      <TD><INPUT type="text" name="txtB[]"/></TD>
    </TR>
  </TABLE>
  
  <TABLE class="dataTable" width="350px" border="1">
    <TR>
      <TD><INPUT type="checkbox" name="chk[]"/></TD>
      <TD><INPUT type="text" name="txtA[]"/></TD>
      <TD><INPUT type="text" name="txtB[]"/></TD>
    </TR>
  </TABLE>
  
  <TABLE class="dataTable" width="350px" border="1">
    <TR>
      <TD><INPUT type="checkbox" name="chk[]"/></TD>
      <TD><INPUT type="text" name="txtA[]"/></TD>
      <TD><INPUT type="text" name="txtB[]"/></TD>
    </TR>
  </TABLE>
</DIV>

Answer 1

您需要在--i之前break。

您已移除i处的元素，因此下一个元素位于i+1，现在位于i。由于for (var i=0;...)循环将递增i，因此您必须减少它以对抗它。

此外，您应该摆脱tableCount=elements.length并直接在循环中使用elements.length，因为您在去的时候正在修改elements。

Answer 2

您需要从 tableCount 值以及 i 值

中减去一个值（-1）

   function deleteTables(tableClass,containerID){
	var container = document.getElementById(containerID);
	var elements = container.getElementsByClassName(tableClass);
	var tableCount = elements.length;
	for(var i=0; i<tableCount; i++) {
		var inputList = elements[i].getElementsByTagName("input");
		var inputListCount = inputList.length;                      
		for(var x=0; x<inputListCount; x++) {
			if (inputList[x].type == "checkbox" && inputList[x].checked == true)
			{
			    container.removeChild(elements[i]);
                            tableCount--;
                            i--;
		            break;
			}
		}
	}
}

<INPUT type="button" value="Delete Table" onclick="deleteTables('dataTable','test_div')" />

<DIV id="test_div">
  <TABLE class="dataTable" width="350px" border="1">
    <TR>
      <TD><INPUT type="checkbox" name="chk[]"/></TD>
      <TD><INPUT type="text" name="txtA[]"/></TD>
      <TD><INPUT type="text" name="txtB[]"/></TD>
    </TR>
  </TABLE>
  
  <TABLE class="dataTable" width="350px" border="1">
    <TR>
      <TD><INPUT type="checkbox" name="chk[]"/></TD>
      <TD><INPUT type="text" name="txtA[]"/></TD>
      <TD><INPUT type="text" name="txtB[]"/></TD>
    </TR>
  </TABLE>
  
  <TABLE class="dataTable" width="350px" border="1">
    <TR>
      <TD><INPUT type="checkbox" name="chk[]"/></TD>
      <TD><INPUT type="text" name="txtA[]"/></TD>
      <TD><INPUT type="text" name="txtB[]"/></TD>
    </TR>
  </TABLE>
</DIV>

希望这会对你有所帮助。

Javascript - 选中复选框后删除子表中的父表

2 个答案: