帶有刪除行選項的動態表
[英]Dynamic table with an option to delete row
問題描述
我有一個表，可以選擇添加一個包含來自用戶和刪除按鈕的數據的新行（當然，它會刪除特定行）。 似乎有點工作，但我有一個問題，即第二次單擊后按鈕可以工作。
我的函數Add()有一個計數器i ，它計算行數 +1（它是將第一列中的 ID 添加到下一個添加行）。 刪除一行時，我需要在每個較高的行（ i-- ）中更改i 。 之后，當我添加一個新行時，它的 ID 是錯誤的（它應該是前一個的 +1，但它是相同的）。
另請注意，當我從控制台調用我的Delete()函數時，它工作得很好。
$("#add_btn").click(function(){Add();}); var D; var A; var B; var B; var i=1; function Add() { D=$("#dropdown").val(); A=$("#A").val(); B=$("#B").val(); C=$("#C").val(); $("#myTable2").append(` <tr id="row`+i+`"> <td class="clm1" id="id`+i+`">`+i+`.</td> <td class="clm2">`+D+`</td> <td class="clm3">`+A+`</td> <td class="clm4">`+B+`</td> <td class="clm5">`+B+`</td> <td class="clm6" id="btn`+i+`"><input type="button" class="delete" id='delete`+i+`' value="x"></td> </tr>`); $("#delete"+i).click(function() {Delete(i);}); n=i; i++; } function Delete(id) { var j; i--; $("#row"+id+"").remove(); for(j=id; j<n; j++) { a=Number(j)+1; $("#id"+a).html(j+"."); $("#id"+a).prop("id", "id"+j); $("#btn"+a).html(`<input type="button" class="delete" id='delete`+j+`' value="x">`); $("#delete"+a).click(function(){Delete(j);}); $("#btn"+a).prop("id", "btn"+j); $("#row"+a).prop("id", "row"+j); } }
#container { background-color: lightsteelblue; height:300px; width:600px; margin-left: auto; margin-right: auto; font-size:9px; } .tableContainer{ height:auto; width:416px; border: solid black 1px; } #myTablecontainer { width:100%; background-color: navy; border: solid lightgray 1px; border-bottom: none; border-top: none; } #myTable { width:400px; height:auto; max-height: 150px; border-collapse: collapse; background-color: navy; } #myTable tr { width:100%; } .MyTableHeadings { font-weight: bold; text-align: center; background-color: navy; color:white; border-left: solid red 1px; padding-left: 5px; padding-right: 5px; } #myTable tr .clm1 { border-left: none; } .scrollContent { height:auto; max-height: 300px; width:416px; overflow-y:auto; background-color: navy; } #myTable2 { width:400px; height:auto; max-height: 150px; border: solid lightgray 1px; border-collapse: collapse; } #myTable2 tr{ width:100%; } #myTable2 tr:nth-child(even) { background-color: lightgray; } #myTable2 tr:nth-child(odd) { background-color: lightslategrey; } #myTable2 td { text-align: center; padding-left: 5px; padding-right: 5px; } .clm1{ width:10%; } .clm2 { width: 25%; } .clm3 { width: 15%; } .clm4 { width:20%; } .clm5 { width:20%; } #myTable2 tr .clm6 { text-align: left; width: 10%; }
<body> <div id="container"> <fieldset> <legend>Dane</legend> Dropdown <select name="drp" id="dropdown" style="width:90px;" > <option value="0"></option> <option value="1">1 </option> <option value="2">2</option> </select> <br> A <input type="text" id="A"> <br> B <input type="text" id="B"> <br> C <input type="text" id="C"> <input type="button" value='Add' id='add_btn'/> </fieldset> <div id="tableContainer" class="tableContainer"> <div id="myTablecontainer"> <table id="myTable" > <tr> <th class='MyTableHeadings clm1'> ID</th> <th class='MyTableHeadings clm2'>H1</th> <th class='MyTableHeadings clm3'> H2</th> <th class='MyTableHeadings clm4'>H3</th> <th class='MyTableHeadings clm5'>H4</th> <th class='MyTableHeadings clm6'>Delete</th> </tr> </table> </div> <div class="scrollContent"> <table id="myTable2"> </table> </div> </div> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1 個解決方案
解決方案1
1 已采納 2019-01-23 11:12:36
問題是因為您的第一次點擊添加了事件處理程序，第二次點擊事件處理程序執行。 這也會帶來不必要的副作用，即在后續點擊中添加越來越多的事件處理程序。
要解決問題並改進邏輯，請使用委托的事件處理程序。 這樣你就可以遍歷 DOM 以使用closest()找到相關的tr 。 這反過來意味着您可以刪除所有增量id屬性的丑陋。
這里還有一些其他的事情需要注意。 首先，當您使用模板文字時，您在連接值時錯過了它們的重點。 改用${}語法來注入值。 您還兩次聲明了B變量； 刪除一個。
說了這么多，試試這個：
$("#add_btn").click(Add); $('#myTable2').on('click', '.delete', function() { $(this).closest('tr').remove(); }); var D, A, B, i = 1; function Add() { D = $("#dropdown").val(); A = $("#A").val(); B = $("#B").val(); C = $("#C").val(); $("#myTable2").append(` <tr> <td class="clm1">${i}.</td> <td class="clm2">${D}</td> <td class="clm3">${A}</td> <td class="clm4">${B}</td> <td class="clm5">${B}</td> <td class="clm6"><input type="button" class="delete" value="x"></td> </tr>`); i++; }
#container { background-color: lightsteelblue; height: 300px; width: 600px; margin-left: auto; margin-right: auto; font-size: 9px; } .tableContainer { height: auto; width: 416px; border: solid black 1px; } #myTablecontainer { width: 100%; background-color: navy; border: solid lightgray 1px; border-bottom: none; border-top: none; } #myTable { width: 400px; height: auto; max-height: 150px; border-collapse: collapse; background-color: navy; } #myTable tr { width: 100%; } .MyTableHeadings { font-weight: bold; text-align: center; background-color: navy; color: white; border-left: solid red 1px; padding-left: 5px; padding-right: 5px; } #myTable tr .clm1 { border-left: none; } .scrollContent { height: auto; max-height: 300px; width: 416px; overflow-y: auto; background-color: navy; } #myTable2 { width: 400px; height: auto; max-height: 150px; border: solid lightgray 1px; border-collapse: collapse; } #myTable2 tr { width: 100%; } #myTable2 tr:nth-child(even) { background-color: lightgray; } #myTable2 tr:nth-child(odd) { background-color: lightslategrey; } #myTable2 td { text-align: center; padding-left: 5px; padding-right: 5px; } .clm1 { width: 10%; } .clm2 { width: 25%; } .clm3 { width: 15%; } .clm4 { width: 20%; } .clm5 { width: 20%; } #myTable2 tr .clm6 { text-align: left; width: 10%; }
<div id="container"> <fieldset> <legend>Dane</legend> Dropdown <select name="drp" id="dropdown" style="width:90px;"> <option value="0"></option> <option value="1">1 </option> <option value="2">2</option> </select><br> A <input type="text" id="A"><br> B <input type="text" id="B"><br> C <input type="text" id="C"> <input type="button" value='Add' id='add_btn' /> </fieldset> <div id="tableContainer" class="tableContainer"> <div id="myTablecontainer"> <table id="myTable"> <tr> <th class="MyTableHeadings clm1">ID</th> <th class="MyTableHeadings clm2">H1</th> <th class="MyTableHeadings clm3">H2</th> <th class="MyTableHeadings clm4">H3</th> <th class="MyTableHeadings clm5">H4</th> <th class="MyTableHeadings clm6">Delete</th> </tr> </table> </div> <div class="scrollContent"> <table id="myTable2"></table> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML jquery：onclick函數刪除動態表行不調用
[英]HTML jquery: onclick function to delete dynamic table row is not calling
parentNode.parentNode.rowindex 刪除動態表中的一行
[英]parentNode.parentNode.rowindex to delete a row in a dynamic table
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.