JQuery ile bir tablo satırını kaldırmak için en iyi yöntem nedir?
Yanıtlar:
Haklısın:
$('#myTableRow').remove();Satırınızda aşağıdakiler varsa, bu işe yarar id:
<tr id="myTableRow"><td>blah</td></tr>Eğer yoksa id, jQuery'nin seçici seçicilerinden herhangi birini kullanabilirsiniz .
$('#myTable tr').click(function(){
$(this).remove();
return false;
});Daha da iyisi
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});Tablonuzdaki bir veri hücresinin içinde bir düğme / bağlantınız olduğunu varsayarsak, bunun gibi bir şey hile yapar ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});Bu, tıklanan düğmenin / bağlantının üst öğesinin üst öğesini kaldırır. Normal bir DOM nesnesi değil, bir jQuery nesnesi olduğundan parent () kullanmanız gerekir ve düğme iki satır kullanmanız gerekir, çünkü düğme bir satır içinde yaşayan bir veri hücresinin içinde yaşar .... ne kaldırmak istiyorsunuz. $ (this) tıklanan düğmedir, bu yüzden böyle bir şeye sahip olmak yalnızca düğmeyi kaldırır:
$(this).remove();Bu veri hücresini kaldıracak olsa da:
$(this).parent().remove();Eğer böyle bir şey kaldırmak için satır üzerinde herhangi bir yere tıklamak istiyorsanız sadece işe yarayacaktır. Kullanıcıyı istemek veya yalnızca çift tıklamayla çalışmak için bunu kolayca değiştirebilirsiniz:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});Umarım yardımcı olur ... Bu konuda kendim biraz uğraştım.
Kullanabilirsiniz:
$($(this).closest("tr"))öğenin üst tablo satırını bulmak için.
Bu, yapmaya başladığım ve yakında yolumun hatasını öğrendiğim parent (). Parent () 'den daha zariftir.
--Edit - Birisi sorunun satırın kaldırılmasıyla ilgili olduğuna dikkat çekti ...
$($(this).closest("tr")).remove()Aşağıda belirtildiği gibi şunları yapabilirsiniz:
$(this).closest('tr').remove();Benzer bir kod snippet'i, birden çok öğede olayları tetikleme gibi birçok işlem için kullanılabilir.
$(this).closest("tr").remove()
Kolay .. Bunu dene
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});$(this).parent().parent().parent()kadar $(this).closest('tr'). Daha sağlamdır ve ne seçtiğinizi açıkça gösterir.
Aşağıdakiler kabul edilebilir mi?
$('#myTableRow').remove();function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>Belki böyle bir şey de işe yarayabilir? "Bu" ile bir şey yapmayı denemedim, bu yüzden işe yarayıp yaramadığını bilmiyorum.
Yapmanız gereken tek şey tablo satır ( <tr>) etiketini tablonuzdan kaldırmaktır . Örneğin, son satırı tablodan kaldıracak kod:
$('#myTable tr:last').remove();
* Yukarıdaki kod bu jQuery Howto gönderisinden alınmıştır .
bunu boyut için dene
$(this).parents('tr').first().remove();tam liste:
<!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>Başka biri tarafından empty():
$(this).closest('tr').empty();Silmek istediğiniz satır değişebilirse bunu kullanabilirsiniz. Bu işlevi silmek istediğiniz # satırını iletmeniz yeterlidir.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}$('tr').click(function()
{
$(this).remove();
});i gibi yukarıdaki kodu çalışacağını düşünüyorum, ama neden bazen çalıştığını bilmiyorum ve sonra tüm tablo kaldırılır. Ayrıca satır tıklayarak satır kaldırmaya çalışıyorum. ama kesin bir cevap bulamadık.
böyle bir HTML'niz varsa
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>userid="123"tabloyu oluştururken dinamik olarak doldurabileceğiniz özel bir özellik nerede ,
gibi bir şey kullanabilirsin
$(".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.');
}
});
});Bu durumda, TRetiketin sınıfını veya kimliğini bilmiyorsunuz, ancak yine de silebilirsiniz.
Bunun eski bir gönderi olduğunu takdir ediyorum, ama aynı şeyi yapmak istiyordum ve kabul edilen cevabın benim için işe yaramadığını gördüm. JQuery'nin bu yazıldığı günden bu yana devam ettiğini varsayarsak.
Her neyse, aşağıdakilerin benim için çalıştığını buldum:
$('#resultstbl tr[id=nameoftr]').remove();Bunun kimseye yardım edip etmediğinden emin değilim. Yukarıdaki örneğim, daha büyük bir işlevin parçasıydı, bu yüzden bir olay dinleyicisine sarılmadı.
Önyükleme Tabloları kullanıyorsanız
bu kod snippet'ini bootstrap_table.js'nize ekleyin
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);
};Sonra senin var allowedMethods = [
Ekle 'removeRow'
Sonunda kullanabilirsiniz $("#your-table").bootstrapTable('removeRow',{index:1});
id artık iyi bir seçici değil. Satırlarda bazı özellikler tanımlayabilirsiniz. Ve onları seçici olarak kullanabilirsiniz.
<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>ve böyle bir satırı seçmek için bir işlev kullanabilirsiniz (ES6):
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');Tablodan satır kaldırmak için en kolay yöntem:
Örneğin:
<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