I have a footable that I need to clean. I mean, I need to delete all rows in the footable. Is there any footable function to do that? Or do I need to delete rows one by one?
I tried to reinitialize the table doing this:
$('.footable').footable();
I also have tried to iterate between the rows like this:
var footable = $('table').data('footable');
//This is the problem I don´t know how to get first row in the table.
var row = ??????.parents('tr:first');
var next=row.next();
for (var i=0; i<long-1; i++){
footable.removeRow(next);
next=row.next();
}
footable.removeRow(row);
And my corresponding html source code:
<table class="footable footable-loaded">
<thead>
<tr>
<th>Cantidad</th>
<th>Producto</th>
<th>Precio</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Total</th>
<th id="total">19.5</th>
<th></th>
</tr>
</tfoot>
</table>
You can delete by removeRows() function:
function removeRows(){
$(".footable>tbody>tr").each(function(index, elem){
$(elem).remove();
});
}
DEMO
Try this one
footable.rows.load([])
Related
When I try to add elements to my dom, they're not added, but when I console.log them, I do get a value <th class="text-right" rowspan="1" colspan="1"></th>
for(c=0; c<2; c++) {
console.log(document.getElementById('achats_table').tFoot.children[0].appendChild(document.createElement('th')));
document.getElementById('achats_table').tFoot.children[0].appendChild(document.createElement('th'));
}
Table HTML :
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
what am I doing wrong? how can I debug this? I get no console errors.
It looks like you want to add th elements to a currently blank tfoot? You could try this:
for(c=0; c<2; c++) {
document.querySelector('#achats_table tfoot').appendChild(document.createElement('th'));
}
I have a treegrid that is build like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr class="treegrid-0">
<th>name2</th>
<th>type2</th>
<th>Number2</th>
</tr>
<tr class="treegrid-1">
<th>name1</th>
<th>type1</th>
<th>Number1</th>
</tr>
<tr class="treegrid-2 treegrid-parent-1" style="display:none;">
<th>name1-A</th>
<th>type1-A</th>
<th>Number1-A</th>
</tr>
<tr class="treegrid-3 treegrid-parent-1" style="display:none;">
<th>name1-B</th>
<th>type1-B</th>
<th>Number1-B</th>
</tr>
<tr class="treegrid-4">
<th>name0</th>
<th>type0</th>
<th>Number0</th>
</tr>
</tbody>
</table>
I would like to add the sorting option when i click on a column.
The sorting option has to be done only on the top parent.
It's a treegrid, so the expected behaviour is that the child nodes has to be moved also with the parent if the parent has to move.
How can i do that with JS ?
instead of doing all the hard work yourself, you can use the awesome js/jQuery library: datatables: https://datatables.net/
Just after defining your table, give it an ID
<table id = "myTable">..</table>
and then add the following snippet which will transform your table into an awesome table.
$(document).ready(function(){
$('#myTable').DataTable();
});
Cheers!
I have a below table code. I would like to get the table row value which has class as"highlight", below is the code which i tried but i am getting null. Please someone help.
table name = itemtable; table rows will be loaded dynamically using jquery.
<table cellspacing="0" cellpadding="0" id="itemtable" class="t1" border="1px">
<thead>
<tr>
<th> SLno</th>
<th>Item code</th>
<th>Item name</th>
<th>Received qty</th>
<th>Insp Date</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</thead>
<tbody></tbody>
</table>
using below code to highlight the row using class ".highlight" when user db click on itemtable row.
$(document).on("dblclick", "#itemtable tr", function (e) {
//high light the table row
$('#itemtable tr').not(this).removeClass('highlight');
$(this).toggleClass('highlight');
});
now i am trying to get one of the value say first , which has class as highlight( ie row which is selected) in another flow of program (after highlight).
var selectedrow = $('#itemtable tr.highlight');
var slno = $(this).closest("tr").find('td:eq(2)').text();
Like this?
var selectedRow = $('#itemtable tr.highlight');
var slno = selectedRow.find('td:eq(2)').text();
Below code is working.
var selectedrow = $('.highlight');
var slno = selectedrow.closest("tr").find('td:eq(0)').text();
It totally depends on the ajax response. It would be better if you had share the ajax code. Though try with below code:
<table id="itemtable">
<thead>
<tr>
<th>SLno</th>
<th>Item code</th>
<th>Item name</th>
<th>Received qty</th>
<th>Insp Date</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
...Your ajax response will append here...
</tbody>
</table>
JQuery Code:
$(document).ready(function(){
setTimeout(function(){
$('table#itemtable').find('tr.highlight').each(function(i, v){
$(v).find('td').each(function(v1){
console.log($(this).text());
});
});
}, 4000);
});
Let me know if it works for you. I have added a fiddle.
I tried to use cloneNode mentionned here Copy the content of one table into another but Chrome says cloneNode is not a function
https://jsfiddle.net/4wczdykc/1/
<table>
<thead>
<tr>
<th scope="col" colspan="1">TABLE TO CLONE</th>
</tr>
<tr>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
script:
myTable = document.getElementsByTagName("Table")[0];
myClone = myTable.cloneNode(true);
document.body.appendChild(myClone);
The getElementsByTagName() method accesses all elements with the specified tagname.So you have to select the first element of the NodeList. So passed [0] to select it.
myTable = document.getElementsByTagName("table")[0];
myClone = myTable.cloneNode(true);
document.body.appendChild(myClone);
WORKING FIDDLE
What is the best method in jQuery to add an additional row to a table as the first row?
I have a table like this
<table id="mytable" cellpadding="0" cellspacing="0">
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>
<button id="but">mybutton</button>
I want to add a row as the first row to the beginning of the table with given default values. How can I accomplish this using JavaScript and jQuery? A fiddle will be helpful.
You can use .prepend function in jQuery.
$('#mytable').prepend($('<tr>'));
http://api.jquery.com/prepend/
http://jsfiddle.net/32Ymw/
$("#but").click(function(){
row = $("<tr></tr>");
col1 = $("<td>col1</td>");
col2 = $("<td>col2</td>");
col3 = $("<td>col3</td>");
row.append(col1,col2,col3).prependTo("#mytable");
});
Using .on('click',...); and prepend:
http://jsfiddle.net/k8hCa/
jQuery:
$('#but').on('click', function(e){
$('#mytable').prepend('<tr><td>newcol1</td><td>newcol2</td><td>newcol3</td></tr>');
});
The accepted answer is good, but it is definitely worth noting that the tbody is the node you should append/prepend to, and using the appendTo and prependTo methods is the best solution as it will work when there are any number of rows, including zero.
See this answer for a good example: https://stackoverflow.com/a/1353736/2812428
Note also that it is good practice to specify a tbody yourself, even if there are no rows, to avoid the issue that there would be no tbody automatically in the DOM in the case that there were no rows added to the table.
The jQuery .prepend() method should work
$('#mytable').prepend($('<tr>'));
Folloing is what I am doing
Template
<script type="text/template" id="cardTemplate">
<TR class=Normal>
<TD>
{0}
</TD>
<TD>
{1}
</TD>
<TD>
{2}
</TD>
</TR>
</script>
jQuery
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match
;
});
};
var cardTemplate = $("#cardTemplate").html();
//Note: format is a custom method added for "String"
var template = cardTemplate.format("a", "b","c");
//$('#tblScanResult tbody > tr:first').before(template);
$('#tblScanResult tbody').prepend(template);
This question is really ancient but just for the sake of completeness, if you have headers, you can easily modify Alex answer to insert at the top of the body rows but after the headers rows thusly...
<table id="mytable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</tbody>
</table>
<button id="but">mybutton</button>
$('#but').on('click', function(e){
$('#mytable > tbody').prepend('<tr><td>newcol1</td><td>newcol2</td><td>newcol3</td></tr>');
});