[英]Javascript - Remove Parent Table within child tables when checkbox is checked
I've wrote some code to remove the parent tables within a container where a checkbox is checked. 我已经编写了一些代码来删除选中了复选框的容器内的父表。 It works on the first element properly.
它可以在第一个元素上正常工作。
But when I try to remove multiple elements by checked all three checkboxes, it throws error - elements[i] becomes undefined
. 但是,当我尝试通过选中所有三个复选框来删除多个元素时,它会抛出错误
elements[i] becomes undefined
。
I've seen other solutions for doing this but they don't seem to apply exactly to what I'm doing with removing all selected tables within a container. 我已经看到了其他解决方案,但是它们似乎并不完全适用于我删除容器中所有选定表的操作。
Please let me know, what I'm doing wrong. 请让我知道,我做错了。
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>
You just need a --i
before the break
. 在
break
之前,您只需要一个--i
。
You've removed the element at i
, so the next one, which would have been at i+1
, will now be at i
. 您已删除了
i
处的元素,因此下一个原本应为i+1
的元素现在将位于i
。 Since the for (var i=0;...)
loop will increment i
, you have to decrement it to counter that. 由于
for (var i=0;...)
循环将使i
递增,因此您必须对其递减以抵消它。
Also, you should probably get rid of tableCount=elements.length
and use elements.length
directly in the loop, since you're modifying elements
as you go. 另外,您可能应该摆脱
tableCount=elements.length
并直接在循环中使用elements.length
,因为您要tableCount=elements.length
修改elements
。
You need to minus one value (-1) from the tableCount value and also in i value 您需要从tableCount值减去一个值(-1),也要在i值中减去
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>
Hope this will help you. 希望这会帮助你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.