Wat is de beste methode om een tabelrij met jQuery te verwijderen?
Antwoord 1, Autoriteit 100%
U hebt gelijk:
$('#myTableRow').remove();
Dit werkt prima als uw rij een idheeft, zoals:
<tr id="myTableRow"><td>blah</td></tr>
Als u geen idhebt, kunt u een van JQuery’s plethora van gebruiken selectors .
Antwoord 2, Autoriteit 26%
$('#myTable tr').click(function(){
$(this).remove();
return false;
});
Zelfs een betere
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});
Antwoord 3, Autoriteit 14%
Ervan uitgaande dat u een knop / link in de binnenkant van een gegevenscel in uw tabel hebt, zou zoiets als dit de slag doen …
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});
Hiermee wordt de ouder van de ouder van de knop / link) verwijderd. U moet ouder () gebruiken omdat het een jQuery-object is, geen normaal DOM-object, en u moet ouder () tweemaal gebruiken, omdat de knop in een gegevenscel woont, die in een rij woont …. Dat is Wat u wilt verwijderen. $ (dit) is de knop geklikt, dus gewoon iets dergelijks te hebben, wordt alleen de knop verwijderd:
$(this).remove();
Hoewel dit de gegevenscel wordt verwijderd:
$(this).parent().remove();
Als u eenvoudig op de rij wilt klikken om het zoiets te verwijderen, zou er iets werken. U kunt dit eenvoudig wijzigen om de gebruiker te vragen of alleen op een dubbelklik te werken:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});
Ik hoop dat dat helpt … Ik worstelde mezelf.
Antwoord 4, Autoriteit 9%
U kunt gebruiken:
$($(this).closest("tr"))
Voor het vinden van de bovenliggende tabel rij van een element.
Het is eleganter dan ouder (). ouder (), wat ik begon te doen en heeft al snel de fout van mijn wegen geleerd.
– Bewerken –
Iemand heeft erop gewezen dat de vraag ging over het verwijderen van de rij …
$($(this).closest("tr")).remove()
Zoals hieronder wordt aangegeven, kunt u eenvoudig doen:
$(this).closest('tr').remove();
Een vergelijkbare codefragment kan voor veel operaties worden gebruikt, zoals het afvuren van evenementen op meerdere elementen.
Antwoord 5, Autoriteit 3%
Easy .. Probeer dit
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});
Antwoord 6, Autoriteit 2%
Is het volgende acceptabel:
$('#myTableRow').remove();
Antwoord 7, autoriteit 2%
Het enige wat u hoeft te doen is de tabelrij (<tr>) tag uit uw tabel te verwijderen. Hier is bijvoorbeeld de code om de laatste rij uit de tabel te verwijderen:
$('#myTable tr:last').remove();
*De bovenstaande code is overgenomen van deze jQuery Howto-post.
Antwoord 8, autoriteit 2%
function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>
Misschien zou zoiets ook kunnen werken? Ik heb niet geprobeerd iets met “dit” te doen, dus ik weet niet of het werkt of niet.
Antwoord 9, autoriteit 2%
probeer dit voor de maat
$(this).parents('tr').first().remove();
volledige lijst:
<!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="https://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>
Antwoord 10
Nog een door empty():
$(this).closest('tr').empty();
Antwoord 11
Als de rij die u wilt verwijderen verandert, kunt u deze gebruiken. Geef deze functie gewoon de rij # die u wilt verwijderen.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}
Antwoord 12
als je HTML hebt zoals deze
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>
waarbij userid="123"een aangepast kenmerk is dat u dynamisch kunt invullen wanneer u de tabel maakt,
je kunt zoiets gebruiken als
$(".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.');
}
});
});
Dus in dat geval ken je de klasse of id van de TRTag maar hoe dan ook, je bent in staat om het te verwijderen.
Antwoord 13
$('tr').click(function()
{
$(this).remove();
});
Ik denk dat je de bovenstaande code probeert, terwijl het werkt, maar ik weet niet waarom het al eens werkt en dan is de hele tafel verwijderd. Ik probeer ook de rij te verwijderen door op de rij te klikken. maar kon het exacte antwoord niet vinden.
Antwoord 14
Ik waardeer dit dat dit een oude post is, maar ik was op zoek naar hetzelfde en vond het geaccepteerde antwoord niet voor mij. Ervan uitgaande dat jQuery is verhuisd omdat dit is geschreven.
Hoe dan ook, ik vond het volgende voor mij:
$('#resultstbl tr[id=nameoftr]').remove();
Niet zeker of dit iedereen helpt. Mijn voorbeeld hierboven was onderdeel van een grotere functie, dus wikkelde het niet in een gebeurtenisluisteraar.
Antwoord 15
Als u Bootstrap Tables
gebruikt
Voeg deze code-fragment toe aan uw 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);
};
Dan in uw var allowedMethods = [
Voeg 'removeRow'
Eindelijk kunt u $("#your-table").bootstrapTable('removeRow',{index:1});
Antwoord 16
id is nu geen goede keuze. U kunt sommige eigenschappen op de rijen definiëren. En u kunt ze als selector gebruiken.
<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>
En u kunt een FUNC gebruiken om de rij zoals deze (ES6) te selecteren:
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');
Antwoord 17
De eenvoudigste methode om rijen uit de tabel te verwijderen:
- Rij van tafel verwijderen met behulp van zijn unieke ID.
- Verwijderen op basis van de bestelling / index van die rij. Ex: verwijder de derde of vijfde rij.
Bijvoorbeeld:
<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