Apa metode terbaik untuk menghapus baris tabel dengan jQuery?
Jawaban:
Kamu benar:
$('#myTableRow').remove();Ini berfungsi dengan baik jika baris Anda memiliki id, seperti:
<tr id="myTableRow"><td>blah</td></tr>Jika Anda tidak memiliki id, Anda dapat menggunakan sebagian besar pemilih pemilih jQuery .
$('#myTable tr').click(function(){
$(this).remove();
return false;
});Bahkan yang lebih baik
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});Dengan anggapan Anda memiliki tombol / tautan di dalam sel data di meja Anda, sesuatu seperti ini akan membantu ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});Ini akan menghapus induk dari tombol / tautan yang diklik. Anda perlu menggunakan parent () karena itu adalah objek jQuery, bukan objek DOM normal, dan Anda perlu menggunakan parent () dua kali, karena tombolnya hidup di dalam sel data, yang hidup di dalam baris .... yang apa yang ingin Anda hapus. $ (ini) adalah tombol yang diklik, jadi memiliki sesuatu seperti ini hanya akan menghapus tombol:
$(this).remove();Sementara ini akan menghapus sel data:
$(this).parent().remove();Jika Anda hanya ingin mengklik di mana saja pada baris untuk menghapusnya sesuatu seperti ini akan berhasil. Anda dapat dengan mudah memodifikasi ini untuk meminta pengguna atau hanya bekerja pada klik dua kali:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});Semoga itu bisa membantu ... Saya sendiri sedikit kesulitan dalam hal ini.
Kamu bisa memakai:
$($(this).closest("tr"))untuk menemukan baris tabel induk suatu elemen.
Ini lebih elegan daripada parent (). Parent () yang merupakan apa yang saya mulai lakukan dan segera belajar kesalahan dari cara saya.
--Edit - Seseorang menunjukkan bahwa pertanyaannya adalah tentang menghapus baris ...
$($(this).closest("tr")).remove()Seperti yang ditunjukkan di bawah ini, Anda cukup melakukan:
$(this).closest('tr').remove();Cuplikan kode serupa dapat digunakan untuk banyak operasi seperti memecat peristiwa pada banyak elemen.
$(this).closest("tr").remove()
Mudah .. Coba ini
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});$(this).parent().parent().parent()menjadi $(this).closest('tr'). Ini lebih kuat dan jelas menunjukkan apa yang Anda pilih.
Apakah yang berikut ini dapat diterima:
$('#myTableRow').remove();function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>Mungkin sesuatu seperti ini bisa bekerja juga? Saya belum mencoba melakukan sesuatu dengan "ini", jadi saya tidak tahu apakah itu berfungsi atau tidak.
Yang harus Anda lakukan adalah menghapus <tr>tag baris tabel ( ) dari tabel Anda. Misalnya di sini adalah kode untuk menghapus baris terakhir dari tabel:
$('#myTable tr:last').remove();
* Kode di atas diambil dari posting Howto jQuery ini .
coba ini untuk ukuran
$(this).parents('tr').first().remove();daftar lengkap:
<!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>Satu lagi oleh empty():
$(this).closest('tr').empty();Jika baris yang ingin Anda hapus dapat berubah, Anda dapat menggunakan ini. Lewati saja fungsi ini baris # yang ingin Anda hapus.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}$('tr').click(function()
{
$(this).remove();
});Saya pikir Anda akan mencoba kode di atas, karena berfungsi, tetapi saya tidak tahu mengapa itu bekerja untuk beberapa saat dan kemudian seluruh tabel dihapus. saya juga mencoba menghapus baris dengan mengklik baris. tetapi tidak dapat menemukan jawaban yang tepat.
jika Anda memiliki HTML seperti ini
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>di mana userid="123"atribut khusus yang dapat Anda isi secara dinamis saat Anda membangun tabel,
Anda dapat menggunakan sesuatu seperti
$(".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.');
}
});
});Jadi dalam hal ini Anda tidak tahu kelas atau id dari TRtag tetapi Anda dapat menghapusnya.
Saya menghargai ini adalah posting lama, tetapi saya ingin melakukan hal yang sama, dan menemukan jawaban yang diterima tidak bekerja untuk saya. Dengan asumsi JQuery telah pindah sejak ini ditulis.
Bagaimanapun, saya menemukan yang berikut ini bekerja untuk saya:
$('#resultstbl tr[id=nameoftr]').remove();Tidak yakin apakah ini membantu siapa pun. Contoh saya di atas adalah bagian dari fungsi yang lebih besar sehingga tidak membungkusnya dengan pendengar acara.
Jika Anda menggunakan Tabel Bootstrap
tambahkan potongan kode ini ke bootstrap_table.js Anda
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);
};Lalu di var allowedMethods = [
Menambahkan 'removeRow'
Akhirnya bisa Anda gunakan $("#your-table").bootstrapTable('removeRow',{index:1});
id bukan pemilih yang baik sekarang. Anda dapat mendefinisikan beberapa properti di baris. Dan Anda bisa menggunakannya sebagai pemilih.
<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>dan Anda dapat menggunakan func untuk memilih baris seperti ini (ES6):
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');Metode termudah untuk menghapus baris dari tabel:
Sebagai contoh:
<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