Could it be possible?
I tried:
$("#tbl1 tbody").empty().append(markup)
var tbl = document.getElementById("tbl1")
var lastRow = tbl.rows[tbl.rows.length - 1];
$("#tbl2 tbody").append(lastRow)
Thanks for any help.
It's easy all you have to do is check if it's not the last row then remove. Refer below-mentioned code to remove every row except last.
$("table tr:not(:last)").remove()
Related
I am generating a table row which has two columns dynamically in html containing values from the database.
I want every td of the first column to have an unique id which i have done but i cant set the id to the td of last row in the table.
Here's the code to set id
<script>
var i=0;
var id=1;
while(i<100)
{
document.getElementsByTagName("td")[i].setAttribute("id", id);
i=i+2;
id=id+1;
}
</script>
Any help will be appreciated
but i cant set the id to the td of last row in the table.
You need to get to the last row in the table first.
var allRows = document.getElementsByTagName("tr");
var lastRow = allRows[allRows.length - 1];
now set Id to the first td of last row
lastRow.getElementsByTagName("td")[0].setAttribute("id" , allRows.length + 1 );
DOM Selectors are provided for a reason. :)
var tds = $('tr td:first-child');
var i=0;
$.each(tds, function(){
$(this).attr('id',i++);
});
OR
Using pure javascript
var tds = document.querySelectorAll('tr td:first-child');
var i = 0;
for(var td in tds){
tds[td].setAttribute('id',i++);
// or
//tds[td].id=(i++).toString();
};
You can use querySelectorAll to get all first td's withing given table using :first-child;
It will return NodeList which need to be convert into in an Array.
var arrTD = document.querySelectorAll("#list-notification tr td:first-child");
arrTD = Array.prototype.slice.call(arrTD);
var i =0;
arrTD.forEach(function(val,key){
val.setAttribute('id',i);
++i
})
I am using jquery datatables. I want to clear table except the first row.
var table = $('tableId').DataTable({});
Sample:
tr1
tr2
tr3
table.clear().draw(); //This clear all rows, How do I exclude first row
clear table:
tr1
How about this - I've used .rows().remove() instead of .clear(), so I could select which rows should be removed.
$('#deleteAll').click(function(){
//get first element
var firstElement = $('tbody > tr').first();
/*remove all <tr> which are coming after the first element and
redraw the table */
table.rows(firstElement.nextAll('tr')).remove().draw();
});
Fiddle
I'm trying to create my own script for a mobile version of my tables on my website.
Im currently using the script below to get the size of the table, and create new tables for each row, duplicating the headers into each new table.... (see: http://api.jquerymobile.com/table-reflow/ ) to get an idea of what I'm trying to achieve.
My script is as follows, but their is a js fiddle included at the bottom for a better example.
My problem is that I am only able to create 1 inside each table, where it should really be 3 rows, inside of each table. Again check the fiddle below for a proper example. Can anyone see why it is only creating 1 row in the table?
<script>
$(document).ready(function(){
var TableSize = $("table thead tr th").not("table.mobile_table thead tr th").size(); // Get # of columns
var i = 1;
var TableRowCount = $("table tbody tr").size(); // Get # of body rows
$("table thead tr th").each(function(){
$(this).attr("id", i++); // Give headers incrementing ID
});
for ( var CreateTables = 1; CreateTables < TableRowCount; CreateTables++ ){ // Create new table class="mobile_table" for each row
$("table").after("<table class='mobile_table'></table>");
}
$("table.mobile_table").each(function(){// Insert original headers into each row of new table as first column
var h = 1;
while ( ++h < TableSize){ // this is where the error is, it gives me the stuff below but x3 (the number of created tables)......
$("table.mobile_table").after("<tr><td></td><td></td><td></td></tr>");
}
});
console.log(TableSize);
console.log(TableRowCount);
});
</script>
See the fiddle: http://jsfiddle.net/Yf7KV/
Do you mean like this: http://jsfiddle.net/Yf7KV/2/
JS
$(this).append("<tr><td class='mobile_col_1'>Col 1</td><td class='mobile_col_2'>Col 2</td></tr>");
Explanation: Append will alllow you to append elements one after the another. html replaces with what you currently have
I have two tables say table 1 and table 2.(both having equal number of rows)
For each of the rows in table 1, I wish to set the height of the corresponding cells in table 2 equal to the corresponding cell in table 1. i.e table2-row1-col1 = table1-row1-col1 and similar.
Please help me .
Use .each to loop through the rows in the first table, and use .eq() to select the table-2 row which corresponds to each table-1 row:
$('#table1 tr').each(function(i,el) {
var hgt = $(this).height();
$('#table2 tr').eq(i).height(hgt);
});
http://jsfiddle.net/mblase75/sCdRk/
Assuming both tables have the exact same number of rows, the below should work. If they differ you'll need to check the existence of a matching table1 row before setting the height.
var $table1 = $("#table1");
var $table2 = $("#table2");
$("TR", $table2).each(function(index) {
$(this).css("height", $("TR", $table1).eq(index).css("height"));
});
Fiddle here to prove it works.
First, you must make sure the two tables have the same number of rows or add some index check codes to avoid OutOfIndex error.
Here is some codes, just FYI:
var tbl2Rows = $("#tbl2 > tbody > tr");
$("#tbl1 > tbody > tr").each(function(index){
console.log($(this).height());
$(tbl2Rows.get(index)).height($(this).height());
});
I am using JS to append array data to a table.
I am trying to add a button that removes the appended data, and puts its own data in instead. I can get the data to be added, but I cant get the data removed.
I have tried these with no luck -
.children().last().remove();
&
.removeChild() ;
I have a fiddle but I cant get the original data remove when new added (button now works! -thanks) - http://jsfiddle.net/2waZ2/37/
What code do I add so when the new line from the array is added the old data is removed?
Code to append on load:
var row = document.createElement('tr');
row.innerHTML = displayArrayAsTable(QR4, 24, 25);
document.getElementById('mytable').appendChild( row ) ;
Button code to add data:
function addNewRow() {
var row = document.createElement('tr');
row.innerHTML = displayArrayAsTable(QR4L, 24, 25);
document.getElementById('mytable').appendChild( row ) ;
}
http://jsfiddle.net/2waZ2/47/
Removing the 1st child row:
var table = document.getElementById('mytable');
table.removeChild(table.children[1])
I have updated the fiddle and it works fine now.
You can use something like this before adding the new row:
var last = document.getElementById('mytable').lastChild ;
document.getElementById('mytable').removeChild(last);
A trivial answer with jQuery: http://jsfiddle.net/guard/2waZ2/48/