Develop Reference

How to get last inserted row from a datatable

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();

Get HTML element by JavaScript

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.

SlickGrid_AppendNew Row with different Id

I m using slickgrid V2.2, I am trying to append new row from the selected row along with data in the selected row. Its working fine, but in the added row the same id generating as the selected row by default. I am using below code. Kindly help me out to append a new row with different id from selectedrow
var row = grid.getDataItem(selectedRow);
dataView.addItem(row);
grid.render();
grid.setSelectedRows([]);

row is simply an object containing the columns, so row.id = {new id}; should work. You'll need to generate the id somehow depending on how your scheme works (don't use the curly brackets around the new id value, I'm just indicating that this value needs to be inserted).

dataTable addClass('selected') not working for some reason

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()

Inserting a row cloned from one table into a specific location of another table

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 !