This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 2 years ago.
I have a html table like so -
<table class="table" id="myTable">
<thead>
<th>Email</th>
<th>Delete</th>
</thead>
<tbody>
</tbody>
I can dynamically add to the table doing this:
var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
table.append("<tr><td>"+user_email+"</td><td><input type='button' value='Del' id ='"+user_id+"'class='btn btn-danger btn-sm'></td></tr>");
But when I try to remove a row doing this:
$('input[type="button"]').click(function(e){
$(this).closest('tr').remove()
})
The row don't remove. How do I resolve this?
You were pretty close, since the TR and the button are dynamically generated,
use the .on() method:
$("#myTable").on("click", "input[type='button']", function(e){
$(this).closest('tr').remove()
});
Sometimes not using jQuery may help you understand what's actually happening. Here's a snippet that may be helpful.
// add the listener to the document (event delegation)
document.addEventListener("click", deleteRow);
// add a first row
addRow(document.querySelector("#myTable"));
function deleteRow(evt) {
// read data-property (data-delete or data-add)
if (evt.target.dataset.delete) {
// retrieve the row to delete
const row2Delete = evt.target.closest("tr");
// remove that from *its parent* (the table)
row2Delete.parentNode.removeChild(row2Delete);
} else if (evt.target.dataset.add) {
addRow(document.querySelector("#myTable"));
}
return true;
}
function addRow(toTable) {
// create a row
const row = document.createElement("tr");
// create 2 cells
const cell1 = document.createElement("td");
const cell2 = cell1.cloneNode(true);
//create a button for the second cell
const bttn = document.createElement("button");
bttn.dataset.delete = "1";
bttn.textContent = "delete";
// fill the first cell with a random e-mailaddress
cell1.appendChild(document.createTextNode(`someUser${
Math.floor(1 + Math.random() * 10000000)}#somewhere.net`));
// append button to cell2
cell2.appendChild(bttn);
// append cells to row
row.appendChild(cell1);
row.appendChild(cell2);
// append row to table
toTable.appendChild(row);
}
<button data-add="1">Add a row</button>
<table class="table" id="myTable">
<thead>
<th>Email</th>
<th>Delete</th>
</thead>
<tbody>
</tbody>
I am appending rows to the table whenever a event is occurring.But when I am trying to filter the table, I am only able to filter the static data in the table. How can I also filter the appended rows. Please help me with this.
//Filter rows
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
The variable rows is initialised with the rows in the DOM at the moment you tell jQuery to get those elements. No matter how many rows you add or remove, the rows variable will always have the same set of element. The quickest solution is to move your variable declaration inside the keyup handler like this:
$('#search').keyup(function() {
var $rows = $('#table tr');
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
Another solution would the use getElementsByTagName, this returns a live HTMLCollection. In other words, changes in the DOM are reflected in your variable as they occur. The snippet below will log the number of rows in the table without re-querying the DOM.
const
tableTwo = document.getElementById('table2'),
// Get a live HTMLCollection with the rows in table 2.
tableTwoRows = tableTwo.getElementsByTagName('tr');
// Log the number of rows in table 2.
console.log(`Number of rows in table 2 before insert: ${tableTwoRows.length}`);
const
cell = document.createElement('td'),
row = document.createElement('tr'),
body = tableTwo.querySelector('tbody');
// Create a third row to add to the table.
cell.textContent = 'table 2, row 3';
row.appendChild(cell);
body.appendChild(row);
// Log the number of rows in table 2, this should report a number than the last
// log eventhough we didn't update the content of the tableTwoRows variable manually.
console.log(`Number of rows in table 2 after insert: ${tableTwoRows.length}`);
<table id="table1">
<tbody>
<tr>
<td>table 1, row 1</td>
</tr>
</tbody>
</table>
<table id="table2">
<tbody>
<tr>
<td>table 2, row 1</td>
</tr>
<tr>
<td>table 2, row 2</td>
</tr>
</tbody>
</table>
I'm trying to add a new set of rows below the original one's and have a delete function together w/ the add function. Luckily I bumped into an article of w3schools : http://www.w3schools.com/jsref/met_table_insertrow.asp
However it adds the new cells above the original one's, how can I tweak it to make it work?
CODE:
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table><br>
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>
<script>
function myCreateFunction()
{
var table = document.getElementById("myTable");
{
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
}
function myDeleteFunction()
{
document.getElementById("myTable").deleteRow(0);
}
</script>
insertRow() takes the position of the new row as an (optional) parameter. So, if you want the new row at the end of the table, insert an according index like this:
var row = table.insertRow( table.rows.length );
Example Fiddle
In your code you set an index of 0, which by definition is the first row.
Here's the jQuery solution.... if you want it.
HTML
<table border="1" id="myTable">
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<input type="button" onclick="addRow()" value="Add row" />
JavaScript
var rowNo = 1;
function addRow()
{
$('#myTable tbody').append('<tr><td>Row #'+ rowNo +'</td>'+
'<td>Row #'+ rowNo +'</td></tr>');
rowNo++;
}
Live Demo
If you are using jQuery then use .after() with :eq(int) and for removing you can use .remove() but if you want to remove only newly added rows then you can use :gt(int) method:
$(function () {
$('#create').on('click', function () {
var table = $('#myTable')[0];
var rows = table.rows.length;
var row = '<tr><td>'+ rows +'</td><td>'+ rows +'</td></tr>';
$('#myTable').find('tr:eq(2)').after(row);
});
$('#delete').on('click', function () {
$('#myTable').find('tr:gt(2)').get(0).remove();
});
});
Using the above script you have to give your buttons specific ids #create for row creation and #delete for delete button like suggested below.
<button id='create'>Create row</button>
<button id='delete'>Delete row</button>
Note:
Unobtrusive javascript is better. Inline scripting should be avoided.
Demo fiddle
Updates:
Instead of hardCode in :eq(2) and :gt(2) we can cache the length of the trs in table:
$(function () {
var o = $('#myTable').find('tr:last').index(); // cache it here
$('#create').on('click', function () {
var table = $('#myTable')[0];
var rows = table.rows.length;
var row = '<tr><td>' + rows + '</td><td>' + rows + '</td></tr>';
$('#myTable').find('tr:eq(' + o + ')').after(row); // place it here
});
$('#delete').on('click', function () {
$('#myTable').find('tr:gt(' + o + ')').get(0).remove(); // and here
});
});
Demo fiddle with cached trs
$('#myTable').find('tr:last').index(); this line gets the last tr's index at the dom ready which is in this case 2 because .index() is 0 based.
var row = table.insertRow(0); // 0 represent the 0th index and hence it add at top
change it to
var tdsLength = table.getElementsByTagName('tr').length;
var row = table.insertRow(tdsLength); //change it to last index
or
var row = table.insertRow(-1);
From Docs, If index is -1 or equal to the number of rows, the row is appended as the last row.
JSFiddle
Change the code in:
var row = table.insertRow(0);
to:
var row = table.insertRow(-1);
Maybe use jQuery .prepend() function? Check it here: http://api.jquery.com/prepend/
I would like to split this entire table into three sub tables using Javascript. Each table should retain it's header information.
I cannot adjust the id's or classes as they are generated by a web application, so I need to make do with what is available.
I've been trying to crack this with Jfiddle for quite awhile and am getting frustrated. I'm pretty new to Javascript, but can't image this would require a lot of code. If anyone knows how to split this apart by row size as well (i.e. Split Table up, but selectively), that would be appreciated as well.
I'm limited to Javascript and Jquery 1.7.
<div id="serviceArray">
<table border="1" class="array vertical-array">
<thead>
<tr>
<th>#</th>
<th>Savings</th>
<th>Expenses</th>
<th>Savings</th>
<th>Expenses</th>
<th>Savings</th>
<th>Expenses</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sum</td>
<td>$180</td>
<td>$500</td>
<td>$300</td>
<td>$700</td>
<td>$600</td>
<td>$1000</td>
</tr>
<tr>
<td>Home</td>
<td>$100</td>
<td>$200</td>
<td>$200</td>
<td>$300</td>
<td>$400</td>
<td>$500</td>
</tr>
<tr>
<td>Work</td>
<td>$80</td>
<td>$300</td>
<td>$100</td>
<td>$400</td>
<td>$200</td>
<td>$500</td>
</tr>
</tbody>
</table>
</div>
Did you mean like this?
var tables = $('#serviceArray table tbody tr').map(function () { //For each row
var $els = $(this).closest('tbody') //go to its parent tbody
.siblings('thead').add( //fetch thead
$(this) //and add itself (tr)
.wrap($('<tbody/>')) //wrapping itself in tbody
.closest('tbody')); //get itself with its tbody wrapper
return $els.clone() //clone the above created steps , i.e thead and tbody with one tr
.wrapAll($('<table/>', { //wrap them all to a new table with
'border': '1', //attributes.
'class': 'array vertical-array'
})
).closest('table'); //get the new table
}).get();
$('#serviceArray table').remove();
$('body').append(tables); //append all to the table.
Demo
Or just simply clone the table and remove all other trs from tbody except this one and add it to DOM (Much Shorter Solution).
var tables = $('#serviceArray table tbody tr').map(function (idx) {
var $table = $(this).closest('table').clone().find('tbody tr:not(:eq(' + idx + '))').remove().end();
return $table;
}).get();
Demo
Each of the methods used has documentation available in web and you can use this to work out something yourself to what you need.
You can use simple Javascript for table creation and it will generate rows according to your returned response from api.
var tableHeader = this.responseJsonData.Table_Headers;
var tableData = this.responseJsonData.Table_Data;
let table = document.querySelector("table");
function generateTableHead(table, data) {
//alert("In Table Head");
let thead = table.createTHead();
let row = thead.insertRow();
for (let key of data) {
let th = document.createElement("th");
let text = document.createTextNode(key);
th.appendChild(text);
row.appendChild(th);
}
}
function generateTable(table, data) {
// alert("In Generate Head");
for (let element of data) {
let row = table.insertRow();
for (key in element) {
let cell = row.insertCell();
let text = document.createTextNode(element[key]);
cell.appendChild(text);
}
}
}
How can I delete all rows of an HTML table except the <th>'s using Javascript, and without looping through all the rows in the table? I have a very huge table and I don't want to freeze the UI while I'm looping through the rows to delete them
this will remove all the rows:
$("#table_of_items tr").remove();
Keep the <th> row in a <thead> and the other rows in a <tbody> then replace the <tbody> with a new, empty one.
i.e.
var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)
Very crude, but this also works:
var Table = document.getElementById("mytable");
Table.innerHTML = "";
Points to note, on the Watch out for common mistakes:
If your start index is 0 (or some index from begin), then, the correct code is:
var tableHeaderRowCount = 1;
var table = document.getElementById('WRITE_YOUR_HTML_TABLE_NAME_HERE');
var rowCount = table.rows.length;
for (var i = tableHeaderRowCount; i < rowCount; i++) {
table.deleteRow(tableHeaderRowCount);
}
NOTES
1. the argument for deleteRow is fixed
this is required since as we delete a row, the number of rows decrease.
i.e; by the time i reaches (rows.length - 1), or even before that row is already deleted, so you will have some error/exception (or a silent one).
2. the rowCount is taken before the for loop starts
since as we delete the "table.rows.length" will keep on changing, so again you have some issue, that only odd or even rows only gets deleted.
Hope that helps.
This is an old question, however I recently had a similar issue.
I wrote this code to solve it:
var elmtTable = document.getElementById('TABLE_ID_HERE');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;
for (var x=rowCount-1; x>0; x--) {
elmtTable.removeChild(tableRows[x]);
}
That will remove all rows, except the first.
Cheers!
If you can declare an ID for tbody you can simply run this function:
var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
Assuming you have just one table so you can reference it with just the type.
If you don't want to delete the headers:
$("tbody").children().remove()
otherwise:
$("table").children().remove()
hope it helps!
I needed to delete all rows except the first and solution posted by #strat but that resulted in uncaught exception (referencing Node in context where it does not exist). The following worked for me.
var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>0; x--) {
myTable.deleteRow(x);
}
the give below code works great.
It removes all rows except header row. So this code really t
$("#Your_Table tr>td").remove();
this would work iteration deletetion in HTML table in native
document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
Assing some id to tbody tag. i.e. . After this, the following line should retain the table header/footer and remove all the rows.
document.getElementById("yourID").innerHTML="";
And, if you want the entire table (header/rows/footer) to wipe out, then set the id at table level i.e.
How about this:
When the page first loads, do this:
var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;
Then when you want to clear the table:
myTable.innerHTML=myTable.oldHTML;
The result will be your header row(s) if that's all you started with, the performance is dramatically faster than looping.
If you do not want to remove th and just want to remove the rows inside, this is working perfectly.
var tb = document.getElementById('tableId');
while(tb.rows.length > 1) {
tb.deleteRow(1);
}
Pure javascript, no loops and preserving headers:
function restartTable(){
const tbody = document.getElementById("tblDetail").getElementsByTagName('tbody')[0];
tbody.innerHTML = "";
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table id="tblDetail" class="table table-bordered table-hover table-ligth table-sm table-striped">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 2</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
a
</td>
<td>
b
</td>
<td>
c
</td>
<td>
d
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<tr>
<td>
e
</td>
<td>
f
</td>
<td>
g
</td>
<td>
h
</td>
</tr>
</tr>
</tbody>
</table>
<button type="button" onclick="restartTable()">restart table</button>
If you have far fewer <th> rows than non-<th> rows, you could collect all the <th> rows into a string, remove the entire table, and then write <table>thstring</table> where the table used to be.
EDIT: Where, obviously, "thstring" is the html for all of the rows of <th>s.
This works in IE without even having to declare a var for the table and will delete all rows:
for(var i = 0; i < resultsTable.rows.length;)
{
resultsTable.deleteRow(i);
}
this is a simple code I just wrote to solve this, without removing the header row (first one).
var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}
Hope it works for you!!.
Assign an id or a class for your tbody.
document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();
You can name your id or class how you want, not necessarily #tbodyId or .tbodyClass.
#lkan's answer worked for me, however to leave the first row, change
from
for (var x=rowCount-1; x>0; x--)
to
for (var x=rowCount-1; x>1; x--)
Full code:
var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>1; x--) {
myTable.deleteRow(x);
}
This will remove all of the rows except the <th>:
document.querySelectorAll("td").forEach(function (data) {
data.parentNode.remove();
});
Same thing I faced. So I come up with the solution by which you don't have to Unset the heading of table only remove the data..
<script>
var tablebody =document.getElementById('myTableBody');
tablebody.innerHTML = "";
</script>
<table>
<thead>
</thead>
<tbody id='myTableBody'>
</tbody>
</table>
Try this out will work properly...
Assuming the <table> element is accessible (e.g. by id), you can select the table body child node and then remove each child until no more remain. If you have structured your HTML table properly, namely with table headers in the <thead> element, this will only remove the table rows.
We use lastElementChild to preserve all non-element (namely #text nodes and ) children of the parent (but not their descendants). See this SO answer for a more general example, as well as an analysis of various methods to remove all of an element's children.
const tableEl = document.getElementById('my-table');
const tableBodyEl = tableEl.querySelector('tbody');
// or, directly get the <tbody> element if its id is known
// const tableBodyEl = document.getElementById('table-rows');
while (tableBodyEl.lastElementChild) {
tableBodyEl.removeChild(tableBodyEl.lastElementChild);
}
<table id="my-table">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
</tr>
</thead>
<tbody id="table-rows">
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<!-- comment child preserved -->
text child preserved
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
</tr>
</tbody>
</table>
Just Clear the table body.
$("#tblbody").html("");
const table = document.querySelector('table');
table.innerHTML === ' ' ? null : table.innerHTML = ' ';
The above code worked fine for me. It checks to see if the table contains any data and then clears everything including the header.