I'm using datatables plugin to create a datatable. I've put a button to add new rows. The new inserted row can be anywhere depends on which column the table is sorted by. I need to set an event to the button inside the row once it is inserted. So I have to get the last inserted row to do so. But I can't find a way. I've tried below but it's not working. index() does not returning exact index where the row really is.
var row = table.row.add({...});
row.draw();
var tr = $('#datatable tbody tr').get(row.index());
Please help. Your answer is kindly appreciated and thank you in advance.
Take length of table and -1 and that number is the index of last
tr
var lastRowIndex = $('#datatable tr').length -1;
New rows will be appended onto the end of the row list, so you can do something like this
table.row(table.rows().count()-1)
See fiddle here.
Can't find a way to this using any plugin's provided function. But thank God there's a workaround.
Flag the inserted row in column rendering function. For example, I append a tag
datatable = $('#datatable').DataTable({columns : [{render : function(){... <last/> ...}}]});
On inserting new row, insert it with a data that indicate the flag inclusion. Get the row by the flag. And then remove the flag.
datatable.row.add({...}).draw();
var row = $('last').parents('tr');
$('last').remove();
For any other case which don't need to edit the <tr> explicitly, get the index of last inserted row. Get the datatable row and update the data. Set column render function to render the updated row accordingly.
var i = datatable.rows().count() - 1;
var data = datatable.row(i).data();
datatable.row(i).data(changeSomething(data)).draw();
And to remove the row
datatable.row(i).remove().draw();
Related
How can I reach the first row and the first column (using javaScript) from a table in specific URL?
for example in the following URL:
https://www.w3schools.com/jsref/dom_obj_table.asp
In 'Table Object Methods', I want to get "createCaption()" .
Thanks!
you can try this...
you get value into rows of table HTML.
var row = document.getElementById("myTable").rows[0].innerHTML;
Using css you can do
var elem = element.all(by.css('table tr:nth-child(2) td:nth-child(1)').last();
This selects the first column from the second row that is in a table.
Using element.all because there are 3 tables it could apply to, which is why you need the .last() because the table you wanted referenced was the last table. Would work better if the table has an unique ID to reference it with.
I have a function to add a new row to a table. I then want to change the selected row of the table to the new row added. So I remove the selected class from the currently selected row.
$('#regressionListTable tr.selected').removeClass('selected');
I add the row...
var rowAdded = analysisTable.row.add(data.analysis).draw(false);
And then I add the 'selected' class to this added row.
$(rowAdded).addClass('selected');
But for some reason the last step doesn't work and no row on my table is highlighted after I add a row.
Does anyone have any idea why this would happen?
Thanks.
the .row.add() function will return the datatable object, and so will the .draw() function. Thus, rowAdded is not the new row you added.
You could add .node() to the end of it to get the added row:
var rowAdded = analysisTable.row.add(data.analysis).draw(false).node();
From the doc : http://datatables.net/reference/api/row.add(), you have to use the .node function to get the created node :
var rowAdded = analysisTable.row.add(data.analysis).draw(false).node();
The draw method that you call in your code here:
var rowAdded = analysisTable.row.add(data.analysis).draw(false);
does not return the added row. Instead it returns the datatable object.
You need to get the node that was added by calling the node() method on the datatable.
Your code should look more like this to return the row:
var rowAdded = analysisTable.row.add(data.analysis).draw(false).node();
$(rowAdded).addClass('selected');
RE: row.add()
I have two HTML tables; a source address table and a destination address table where I want to shift rows from the source table to the destination table, and vice-versa.
It is mostly working, but I am getting stuck when inserting a row into the destination table from the source table. I do not want to append a row, as the last row in the destination table supports a text field where the user can type in an address manually. Below is the handler function for when a user clicks on a row in the source address table to remove and shift that row into the destination table:
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//The below line of code has been removed because I don't want to add my row to the end of the table.
//$("#destination_christmas_lights_addresses tbody").append(tr);
//Below here is new code added to insert a row
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
//Insert a row into the destination table before the end of route address.
var newRow = tableRef.insertRow(tableRef.rows.length -1);
//Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
newCell.innerHTML = "I want inner HTML from variable tr here";
});
PROBLEM 1
When I use the append function (commented out) it all works fine, except the row is at the bottom of the table which I do not want.
When I use the insertRow function, I can not work out how to move the appropriate elements of the tr variable to create a new row. I need the innerHTML because it includes code to enable the shifting of the row back into the source table.
Somebody please help?
PROBLEM 2 I am sure that the following line of code can written differently.
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
I thought I could use:
var tableRef = $("#destination_christmas_lights_addresses tbody");
but I can't get this to work.
Any help is appreciated.
Thanks for peoples responses. Final solution which solves both my problems is as follows.
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//reference id of element representing the row I want to add the address before.
$("#trip_planner_end_address_row").before(tr);
});
Try this
var $WhereToAppend=('#destination_christmas_lights_addresses').find('tr:first');
($tr).insertBefore($WhereToAppend);
Maybe the problem is "remove method and the clone", you should save the cloned tr in a variable for then remove the original tr.
Like this:
var tr_original = $(this).closest("#source_christmas_lights_addresses tbody tr");
var tr_cloned = tr_original.clone();
tr_original.remove();
I would like see your original sample code, so it would be easy to understand the real trouble ;)
Good luck !
I have a HTML table that automatically adds a row when you enter data on the last row. Because of this automatic generation, the standard tab functionality breaks down. You can see an example of this table here. As such, I use jQuery to bounce back up to the parent row of the first ant last elements when shift-tab or tab is pressed. The code is relatively simple. . .
$(this).parents('tr').next('tr');
No matter what I do, $(this).parents('tr').index() is always returning 0. Thus next() always jumps to the second row of the table, even if I tab from the last field on the ninth row.
Any ideas? Is there a way that I can rebuild the table's tab index after I've added a row, or does anyone know why the row always thinks that it's index is 0?
I could not comment to Sushanth's answer so I'll give my own:
You just need to use:
$(this).closest('tr').index()
The problem with Shushanth's code is that it is passing to index() a jQuery object which matches all the tr in the table. It would work if it was (subtle difference):
$(this).closest('tr').index('#tableid tr')
See my fiddle here.
Try using index with a specific selector.
$tableRows = $('#tableid tr');
$currRow = $(this).closest('tr');
var index = $currRow.index($tableRows);
Writing an extension for tablesorter.. though its my first attempt at extending any js. I have a number of <select>s within a row of <td>s & need to know the column this td sits in.
When a value is changed in any of these selects e.g.
$('select').change(function(){
});
I need to get hold of the column this select is sitting in to set col for:
('tr.result > td:nth-child('+col+')').each(function(){
Is there a way I can get this from the td select is in?!?
--
solution for my specific problem was:
$('select').change(function(){
td = $(this).parent('td');
col = $(td).parent().children().index(td);
});
You can use the index() function.
col = $(this).parent().children().index($(this));
The cellIndex property returns the position of a cell in the cells collection of a table row.
w3schools
td.cellIndex
demo