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

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 !

Figure Out Which Merged Table Cells Would Have Been Clicked?

Is there any way to figure out which cell position is clicked if you have merged table cells? We have 20 cells etc merged together and we would like to figure out if the user has clicked on what would have been for example the 7th cell
We have merged cells which mean specific things but we now need to figure out logically which cell was clicked by a user (even though they are merged).
Is this possible?

You can judge it based on the dimensions of unmerged cells in the same table. Here is an example using jQuery (just because it's much more concise than native JS to demonstrate this point):
var $mergedTd = $('td.myMergedTd'),
$unmergedThs = $('th');
$mergedTd.click(function(e) {
var clickedUnmergedIndex = 0;
$unmergedThs.each(function(i) {
var $th = $(this);
if(e.pageX < $th.pageX + $th.width()) {
clickedUnmergedIndex = i;
} else {
// Stop iterating; we've found the unmerged index
return false;
}
});
alert('You just clicked 0-based cell index #' + clickedUnmergedIndex);
});

I would keep two copies of that table in DOM. One visible and one hidden. You take click events on the visible table, and before you merge the cells, mark the clicked cell (e.g. add a data attribute to it indicating it was marked such as data-marked='1') and copy that table to the hidden one.

Determine row and column index of input in table

I'm working on creating a javascript based spreadsheet application. Right now I can dynamically create the spreadsheet as a table with a supplied number of rows and columns and a text input in each cell as can be seen in this picture.
I'd like to have a generic event tied to all of the inputs in the table in which I am able to determine the row index and column index of the input that fired the event. Something like this:
$('.spreadsheet-cell').click(function () {
var rowIndex = $(this).attr('rowIndex');
var columnIndex = $(this).attr('columnIndex');
});
I originally tried implementing things by dynamically adding row and column index attributes to the html input element when I create it but when I add rows or columns after the original spreadsheet has been created things get messy trying to shift the value of these attributes around. I think I could make that method work if it came down to it but it seems messy and I'd prefer not to mess around so much with the DOM when I figure that there is probably some way using jQuery to determine the relative index of the parent <td> and <tr>.

Use jQuery .index. Within your function:
var rowIndex = $("#table tr").index($(this).closest('tr'));
var colIndex = $("#table td").index(this);

Getting column number from td

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