วิธีที่ดีที่สุดในการลบแถวของตารางด้วย jQuery คืออะไร
คำตอบ:
คุณถูก:
$('#myTableRow').remove();ใช้งานได้ดีถ้าแถวของคุณมีidเช่น:
<tr id="myTableRow"><td>blah</td></tr>หากคุณไม่ได้idคุณสามารถใช้ใด ๆ ของ jQuery มากมายเหลือเฟือของตัวเลือก
$('#myTable tr').click(function(){
$(this).remove();
return false;
});แม้แต่อันที่ดีกว่า
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});สมมติว่าคุณมีปุ่ม / ลิงค์ภายในเซลล์ข้อมูลในตารางของคุณบางอย่างเช่นนี้จะทำเคล็ดลับ ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});สิ่งนี้จะลบพาเรนต์ของพาเรนต์ของปุ่ม / ลิงก์ที่คลิก คุณต้องใช้ parent () เนื่องจากเป็นวัตถุ jQuery ไม่ใช่วัตถุ DOM ปกติและคุณต้องใช้ parent () สองครั้งเนื่องจากปุ่มอาศัยอยู่ในเซลล์ข้อมูลซึ่งอยู่ภายในแถว .... ซึ่งเป็น สิ่งที่คุณต้องการลบ $ (นี่คือปุ่มที่คลิกดังนั้นเพียงแค่มีบางสิ่งเช่นนี้จะเป็นการลบเฉพาะปุ่ม:
$(this).remove();ขณะนี้จะลบเซลล์ข้อมูล:
$(this).parent().remove();หากคุณต้องการเพียงคลิกที่ใดก็ได้ในแถวเพื่อลบบางอย่างเช่นนี้จะทำงาน คุณสามารถแก้ไขสิ่งนี้ได้อย่างง่ายดายเพื่อให้ผู้ใช้หรือทำงานได้เพียงดับเบิลคลิก:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});หวังว่าจะช่วย ... ฉันต้องดิ้นรนกับเรื่องนี้เล็กน้อย
คุณสามารถใช้ได้:
$($(this).closest("tr"))สำหรับการค้นหาแถวตารางแม่ขององค์ประกอบ
มันดูดีกว่า parent (). parent () ซึ่งเป็นสิ่งที่ฉันเริ่มทำและรู้ข้อผิดพลาดจากวิธีการของฉันในไม่ช้า
- แก้ไข - มีคนชี้ให้เห็นว่าคำถามเกี่ยวกับการลบแถว ...
$($(this).closest("tr")).remove()ตามที่อธิบายไว้ด้านล่างคุณสามารถทำได้:
$(this).closest('tr').remove();ข้อมูลโค้ดที่คล้ายกันสามารถใช้สำหรับการดำเนินการหลายอย่างเช่นการยิงเหตุการณ์ในองค์ประกอบหลาย ๆ
$(this).closest("tr").remove()
ง่าย .. ลองใช้ดู
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});$(this).parent().parent().parent() $(this).closest('tr')มีประสิทธิภาพมากขึ้นและแสดงสิ่งที่คุณเลือกได้ชัดเจนยิ่งขึ้น
ยอมรับได้ดังต่อไปนี้:
$('#myTableRow').remove();function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>บางทีสิ่งนี้อาจทำงานได้ดีเช่นกัน? ฉันไม่ได้ลองทำอะไรกับ "นี่" ดังนั้นฉันไม่รู้ว่ามันใช้งานได้หรือไม่
สิ่งที่คุณต้องทำคือการลบ<tr>แท็กแถวของตาราง ( ) ออกจากตารางของคุณ ตัวอย่างเช่นนี่คือรหัสสำหรับลบแถวสุดท้ายออกจากตาราง:
$('#myTable tr:last').remove();
* โค้ดด้านบนนำมาจากjQuery Howto โพสต์นี้
ลองขนาดนี้ดู
$(this).parents('tr').first().remove();รายชื่อเต็ม:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.deleteRowButton').click(DeleteRow);
});
function DeleteRow()
{
$(this).parents('tr').first().remove();
}
</script>
</head>
<body>
<table>
<tr><td>foo</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bar bar</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bazmati</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
</table>
</body>
</html>อีกหนึ่งโดยempty():
$(this).closest('tr').empty();หากแถวที่คุณต้องการลบอาจเปลี่ยนไปคุณสามารถใช้สิ่งนี้ได้ เพียงผ่านฟังก์ชั่นนี้ไปแถว # ที่คุณต้องการลบ
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}$('tr').click(function()
{
$(this).remove();
});ฉันคิดว่าคุณจะลองโค้ดด้านบนขณะที่มันใช้งานได้ แต่ฉันไม่รู้ว่าทำไมมันถึงได้ผลในบางครั้งและตารางทั้งหมดจะถูกลบออก ฉันกำลังพยายามลบแถวด้วยการคลิกที่แถว แต่ไม่สามารถหาคำตอบที่แน่นอน
หากคุณมี HTML เช่นนี้
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>โดยที่userid="123"เป็นแอตทริบิวต์แบบกำหนดเองที่คุณสามารถเติมแบบไดนามิกเมื่อคุณสร้างตาราง
คุณสามารถใช้สิ่งที่ชอบ
$(".spanUser").live("click", function () {
var span = $(this);
var userid = $(this).attr('userid');
var currentURL = window.location.protocol + '//' + window.location.host;
var url = currentURL + "/Account/DeleteUser/" + userid;
$.post(url, function (data) {
if (data) {
var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW
} else {
alert('Sorry, there is some error.');
}
});
});ดังนั้นในกรณีนี้คุณไม่ทราบคลาสหรือรหัสของTRแท็ก แต่คุณสามารถลบได้
ฉันขอบคุณที่นี่เป็นโพสต์เก่า แต่ฉันต้องการทำเช่นเดียวกันและพบว่าคำตอบที่ยอมรับไม่ได้ผลสำหรับฉัน สมมติว่า JQuery ได้ดำเนินการต่อไปนับตั้งแต่มีการเขียน
อย่างไรก็ตามฉันพบว่าสิ่งต่อไปนี้ได้ผลสำหรับฉัน:
$('#resultstbl tr[id=nameoftr]').remove();ไม่แน่ใจว่าสิ่งนี้จะช่วยให้ทุกคน ตัวอย่างข้างบนของฉันเป็นส่วนหนึ่งของฟังก์ชั่นที่ใหญ่กว่าดังนั้นอย่าห่อไว้ในฟังเหตุการณ์
หากคุณใช้ Bootstrap Tables
เพิ่มข้อมูลโค้ดนี้ใน bootstrap_table.js ของคุณ
BootstrapTable.prototype.removeRow = function (params) {
if (!params.hasOwnProperty('index')) {
return;
}
var len = this.options.data.length;
if ((params.index > len) || (params.index < 0)){
return;
}
this.options.data.splice(params.index, 1);
if (len === this.options.data.length) {
return;
}
this.initSearch();
this.initPagination();
this.initBody(true);
};จากนั้นใน var allowedMethods = [
เพิ่ม 'removeRow'
ในที่สุดคุณสามารถใช้ $("#your-table").bootstrapTable('removeRow',{index:1});
id ไม่ใช่ตัวเลือกที่ดีในตอนนี้ คุณสามารถกำหนดคุณสมบัติบางอย่างในแถว และคุณสามารถใช้มันเป็นตัวเลือก
<tr category="petshop" type="fish"><td>little fish</td></tr>
<tr category="petshop" type="dog"><td>little dog</td></tr>
<tr category="toys" type="lego"><td>lego starwars</td></tr>และคุณสามารถใช้ func เพื่อเลือกแถวเช่นนี้ (ES6):
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');วิธีที่ง่ายที่สุดในการลบแถวออกจากตาราง:
ตัวอย่างเช่น:
<table id='myTable' border='1'>
<tr id='tr1'><td>Row1</td></tr>
<tr id='tr2'><td>Row2</td></tr>
<tr id='tr3'><td>Row3</td></tr>
<tr id='tr4'><td>Row4</td></tr>
<tr id='tr5'><td>Row5</td></tr>
</table>
//======REMOVE TABLE ROW=========
//1. remove spesific row using its ID
$('#tr1').remove();
//2. remove spesific row using its order or index.
//row index started from 0-n. Row1 index is 0, Row2 index is 1 and so on.
$('#myTable').find('tr:eq(2)').remove();//removing Row3