單擊復選框后如何使我的動態表格行消失？
[英]How Can I Make My Dynamic Table Row Disappear After CheckBox is Clicked?
問題描述
我有一個 Javascript function 我一直在檢查是否已選中復選框，然后應該使復選框所在的行消失。 到目前為止，function 將獲得行數，但它不會檢查該框是否被選中。 我在下面包含了 function，以及如何設置表格的示例版本。
這是function的原型。
function deleteRows(){
var objTable = document.getElementById('breakTable');
var iRows = document.getElementById('breakTable').getElementsByTagName('tr');
var rowCount = iRows.length;
alert(iRows);
if (rowCount > 1) {
alert("in if");
for (var i = 0; i < objTable.rows.length; i++) {
alert("in for");
var chk = objTable.rows[i].cells[0].childNodes[0];
alert(chk);
if (chk.checked) {
alert("checked");
objTable.deleteRow(i);
iRow--;
i--;
counter = counter + 1;
}
}
}
}
這就是配置表/行的方式。
<wb:define id='rowNumId'>#0#</wb:define>
<wb:hiddenInput name='rowNumId' />
<table id="dtContainer"> <tr class="dtSection" cellspacing="0">
<td><table id="breakTable" class="thisTable" cellspacing="0"><tr>
<td><table id="breakRw" name="breakTable"class="inlineSelect" cellspacing="0" style="padding: 15px;">
<%
for(int i = 0; i < breakList.size(); i++) {
%>
<tr id='row_<%=i%>' style='display: all'>
<td><span id="Delete_TEXT" class="dateSelectFieldLabel"><strong><wb:localize id="MSJSP_70">Delete</wb:localize></strong><span><br />
<input type="checkbox" id='BREAKREC' name='<%="BREAK_REC_" + i%>' value='<%="BREAKREC_" + i%>' /> </td>
<td style="padding-left: 12px;"><span id="BREAK_N" class="dateSelectFieldLabel"><strong><wb:localize id="gaMS71">Break or Holiday</wb:localize></strong><span><br />
<span class="dateSelectFieldInput"><wb:controlField id="BREAK_N" submitName='<%="BREAK_N_"+ i %>' overrideId="##"><%=breaks.get(i).getBreakName() %></wb:controlField><span></td>
<td style="padding-left: 12px;"><span id="BREAK_SD_TEXT" class="dateSelectFieldLabel"><strong><wb:localize id="g2">Start Date</wb:localize></strong><span><br />
<span class="dateSelectFieldInput"><wb:controlField id="BREAK_SD" submitName='<%="BREAK_SD_"+ i%>' overrideId="##"><%=breaks.get(i).getStartDate() %></wb:controlField><span>
<td><span id="BREAK_ED_TEST" class="dateSelectFieldLabel"><strong><wb:localize id="ga73">End Date</wb:localize></strong><span><br />
<span class="dateSelectFieldInput"><wb:controlField id="BREAK_ED" submitName='<%="BREAK_ED_"+ i %>' overrideId="##"><%=breaks.get(i).getEndDate() %></wb:controlField><span></td>
</tr>
1 個解決方案
解決方案1
0 已采納 2020-07-07 15:45:22
您的表結構太復雜，但這是可行的解決方案。在下面的代碼中，我首先在不同表內的每一行中找出inputs(checkbox) ，然后使用循環遍歷它並檢查復選框是否選中，具體取決於我已經使用remove()刪除了包含該復選框的整個tr 。之后我檢查了table(breakRw)是否為空，如果是，那么我已經刪除了整個表。
演示代碼：
function deleteRows() { var objTable = document.getElementById('breakTable'); var iRows = document.getElementById('breakTable').getElementsByTagName('tr'); var rowCount = iRows.length; var row; var chk; if (rowCount > 1) { for (var i = 0; i < objTable.rows.length; i++) { row = objTable.rows[i]; //getting table->tr->td->(inputs checkbox) chk = row.cells[0].children[0].getElementsByTagName("input"); //looping through trs->checkboxes for (var j = 0; j < chk.length; j++) { //if checked if (chk[j].checked) { console.log("checked"); //remove chk[j].parentNode.parentNode.remove() rowCount--; i--; } } } } //looping thorugh rows for (var i = 0; i < objTable.rows.length; i++) { //getting tr var tbl = objTable.rows[i].cells[0].children[0]; //chcking length if (tbl.rows.length == 0) { console.log("removed table whole") //if table not there inside tr -> remove tr objTable.rows[i].remove(); } } }
<table id="dtContainer"> <tr class="dtSection" cellspacing="0"> <td> <table id="breakTable" class="thisTable" cellspacing="0"> <tr> <td> <table id="breakRw" name="breakTable" class="inlineSelect" cellspacing="0" border="1" style="padding: 15px;"> <tr id='row_1' style='display: all'> <td> <span id="Delete_TEXT" class="dateSelectFieldLabel"> <strong> <wb:localize id="MSJSP_70">Delete1</wb:localize> </strong> </span><br /> <input type="checkbox" id='BREAKREC' name="BREAK_REC_1" value="BREAKREC_1" /> </td> <td style="padding-left: 12px;"><span id="BREAK_N" class="dateSelectFieldLabel"><strong><wb:localize id="gaMS71">Break or Holiday</wb:localize></strong><span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_N" submitName='<%="BREAK_N_"+ i %>' overrideId="##"><%=breaks.get(i).getBreakName() %></wb:controlField><span></td> <td style="padding-left: 12px;"><span id="BREAK_SD_TEXT" class="dateSelectFieldLabel"><strong><wb:localize id="g2">Start Date</wb:localize></strong></span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_SD" submitName='<%="BREAK_SD_"+ i%>' overrideId="##"><%=breaks.get(i).getStartDate() %></wb:controlField></span></td> <td><span id="BREAK_ED_TEST" class="dateSelectFieldLabel"><strong><wb:localize id="ga73">End Date</wb:localize></strong></span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_ED" submitName='<%="BREAK_ED_"+ i %>' overrideId="##"><%=breaks.get(i).getEndDate() %></wb:controlField></span></td> </tr> <tr id='row_1' style='display: all'> <td> <span id="Delete_TEXT" class="dateSelectFieldLabel"> <strong> <wb:localize id="MSJSP_70">Delete2</wb:localize> </strong> </span><br /> <input type="checkbox" id='BREAKREC' name="BREAK_REC_1" value="BREAKREC_1" /> </td> <td style="padding-left: 12px;"><span id="BREAK_N" class="dateSelectFieldLabel"><strong><wb:localize id="gaMS71">Break or Holiday</wb:localize></strong><span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_N" submitName='<%="BREAK_N_"+ i %>' overrideId="##"><%=breaks.get(i).getBreakName() %></wb:controlField><span></td> <td style="padding-left: 12px;"><span id="BREAK_SD_TEXT" class="dateSelectFieldLabel"><strong><wb:localize id="g2">Start Date</wb:localize></strong></span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_SD" submitName='<%="BREAK_SD_"+ i%>' overrideId="##"><%=breaks.get(i).getStartDate() %></wb:controlField></span></td> <td><span id="BREAK_ED_TEST" class="dateSelectFieldLabel"><strong><wb:localize id="ga73">End Date</wb:localize></strong></span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_ED" submitName='<%="BREAK_ED_"+ i %>' overrideId="##"><%=breaks.get(i).getEndDate() %></wb:controlField></span></td> </tr> </table> </td> </tr> <tr> <td> <table id="breakRw" name="breakTable" class="inlineSelect" cellspacing="0" border="1" style="padding: 15px;"> <tr id='row_2' style='display: all'> <td> <span id="Delete_TEXT" class="dateSelectFieldLabel"> <strong> <wb:localize id="MSJSP_70">Delete3</wb:localize> </strong> </span><br /> <input type="checkbox" id='BREAKREC' name="BREAK_REC_2" value="BREAKREC_2" /> </td> <td style="padding-left: 12px;"><span id="BREAK_N" class="dateSelectFieldLabel"><strong><wb:localize id="gaMS71">Break or Holiday</wb:localize></strong><span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_N" submitName='<%="BREAK_N_"+ i %>' overrideId="##"><%=breaks.get(i).getBreakName() %></wb:controlField><span></td> <td style="padding-left: 12px;"><span id="BREAK_SD_TEXT" class="dateSelectFieldLabel"><strong><wb:localize id="g2">Start Date</wb:localize></strong></span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_SD" submitName='<%="BREAK_SD_"+ i%>' overrideId="##"><%=breaks.get(i).getStartDate() %></wb:controlField></span></td> <td><span id="BREAK_ED_TEST" class="dateSelectFieldLabel"><strong><wb:localize id="ga73">End Date</wb:localize></strong></span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_ED" submitName='<%="BREAK_ED_"+ i %>' overrideId="##"><%=breaks.get(i).getEndDate() %></wb:controlField></span></td> </tr> <tr id='row_1' style='display: all'> <td> <span id="Delete_TEXT" class="dateSelectFieldLabel"> <strong> <wb:localize id="MSJSP_70">Delete5</wb:localize> </strong> </span><br /> <input type="checkbox" id='BREAKREC' name="BREAK_REC_1" value="BREAKREC_1" /> </td> <td style="padding-left: 12px;"><span id="BREAK_N" class="dateSelectFieldLabel"><strong><wb:localize id="gaMS71">Break or Holiday</wb:localize></strong><span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_N" submitName='<%="BREAK_N_"+ i %>' overrideId="##"><%=breaks.get(i).getBreakName() %></wb:controlField><span></td> <td style="padding-left: 12px;"><span id="BREAK_SD_TEXT" class="dateSelectFieldLabel"><strong><wb:localize id="g2">Start Date</wb:localize></strong></span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_SD" submitName='<%="BREAK_SD_"+ i%>' overrideId="##"><%=breaks.get(i).getStartDate() %></wb:controlField></span></td> <td><span id="BREAK_ED_TEST" class="dateSelectFieldLabel"><strong><wb:localize id="ga73">End Date</wb:localize></strong></span><br /> <span class="dateSelectFieldInput"><wb:controlField id="BREAK_ED" submitName='<%="BREAK_ED_"+ i %>' overrideId="##"><%=breaks.get(i).getEndDate() %></wb:controlField></span></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <button onclick="deleteRows();">Delete</button>
單擊復選框后立即在動態表的警報框中顯示行ID
[英]Show the row id in alert box of dynamic table right after checkbox is clicked
如何使我的 td 中的所有輸入對於單擊編輯按鈕的行都是可編輯的
[英]How can I make all the inputs inside my td's editable for the row the edit button was clicked on
我如何才能使整個表格行都可單擊，以便它選中一個復選框並更改按鈕的顏色？
[英]How can i make an entire table row clickable so that it checks a checkbox and also changes the color of a button?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.