[英]Remove table row after clicking table row delete button
Solution can use jQuery or be plain JavaScript.解决方案可以使用 jQuery 或普通的 JavaScript。
I want to remove a table row after user has clicked the corresponding button contained in the table row cell so for example:我想在用户单击表格行单元格中包含的相应按钮后删除表格行,例如:
<script>
function SomeDeleteRowFunction() {
//no clue what to put here?
}
</script>
<table>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
</table>
you can do it like this:你可以这样做:
<script>
function SomeDeleteRowFunction(o) {
//no clue what to put here?
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
</script>
<table>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
</table>
Using pure Javascript:使用纯 Javascript:
Don't need to pass this
to the SomeDeleteRowFunction()
:不需要this
传递给SomeDeleteRowFunction()
:
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
The onclick function:点击功能:
function SomeDeleteRowFunction() {
// event.target will be the input element.
var td = event.target.parentNode;
var tr = td.parentNode; // the row to be removed
tr.parentNode.removeChild(tr);
}
Following solution is working fine.以下解决方案工作正常。
HTML: HTML:
<table>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
</table>
JQuery:查询:
function SomeDeleteRowFunction(btndel) {
if (typeof(btndel) == "object") {
$(btndel).closest("tr").remove();
} else {
return false;
}
}
I have done bins on http://codebins.com/bin/4ldqpa9我在http://codebins.com/bin/4ldqpa9上做了垃圾箱
As @gaurang171 mentioned, we can use .closest() which will return the first ancestor, or the closest to our delete button, and use .remove() to remove it.正如@gaurang171 提到的,我们可以使用 .closest() 来返回第一个祖先,或者最接近我们的删除按钮,然后使用 .remove() 来删除它。
This is how we can implement it using jQuery click event instead of using JavaScript onclick.这就是我们如何使用 jQuery click 事件而不是使用 JavaScript onclick 来实现它。
$(document).ready(function(){ $("#myTable").on('click','.btnDelete',function(){ $(this).closest('tr').remove(); }); });
table{ width: 100%; border-collapse: collapse; } table td{ border: 1px solid black; } button:hover{ cursor: pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable"> <tr> <th>ID</th> <th >Name</th> <th>Age</th> <th width="1%"></th> </tr> <tr> <td >SSS-001</td> <td >Ben</td> <td >25</td> <td><button type='button' class='btnDelete'>x</button></td> </tr> <tr> <td >SSS-002</td> <td >Anderson</td> <td >47</td> <td><button type='button' class='btnDelete'>x</button></td> </tr> <tr> <td >SSS-003</td> <td >Rocky</td> <td >32</td> <td><button type='button' class='btnDelete'>x</button></td> </tr> <tr> <td >SSS-004</td> <td >Lee</td> <td >15</td> <td><button type='button' class='btnDelete'>x</button></td> </tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.