Javascript - 在複選框被選中時刪除子表內的父表

我已經寫了一些代碼來刪除複選框被選中的容器內的父表。它適用於第一個元素。Javascript - 在複選框被選中時刪除子表內的父表

但是，當我嘗試通過選中所有三個複選框來刪除多個元素時，它會拋出錯誤 - elements[i] becomes undefined。

我已經看到了其他的解決方案，但是他們似乎並不完全適用於我在刪除容器中的所有選定表格時所做的操作。

請讓我知道，我做錯了什麼。

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

<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>

來源

2015-11-23 David Wright

你在哪個瀏覽器中檢查 - 在Chrome瀏覽器中似乎工作正常。 – pedram

只需一個快速指針，不要將大寫字母用作標籤，如果您想使用寬度屬性，則需要將px例如width =「350」 - 但是，無論如何，你真的應該使用CSS。 –

我正在使用firefox。如果您選擇多個框，則不會將其全部刪除。即使在這裏運行代碼片段。 –

你只需要break前--i。

您已刪除i處的元素，因此下一個元素i+1現在處於i。由於for (var i=0;...)循環將增加i，因此您必須將其減1以抵消該循環。

此外，你應該擺脫tableCount=elements.length並直接在循環使用elements.length，因爲你修改elements，當您去。

來源

2015-11-23 06:23:15 Chad

你是對的，這解決了它沒有刪除所有選定的問題。不過，我仍然在Firefox調試器中出現「TypeError：elements [i] undefined」錯誤。 –

這是因爲我的第二點（我剛剛在編輯中添加）關於使用存儲elements.length而不是直接使用它。 – Chad

YAY，這工作！謝謝！ –

你需要從TableCount的值減去一個值（-1），也我值

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

<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>

希望這會幫助你。

來源

2015-11-23 06:27:57 balachandar

Javascript - 在複選框被選中時刪除子表內的父表

回答

相關問題