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

Adding td dynamically to html table at specific position using javascript

I have a HTML table in which a few td's are fixed and the rest are dynamic. So as of now (when all fields are static), the table looks like this
label1 tb1 | label2 tb2 | label3 tb3 | label4 tb4
Label Names and corresponding textbox values would both be dynamic.I have fetched the dynamic values from the table and stored them in a Javascript array. I now need to display those stored values by appending them to the static table present above.
But there's a condition in this. The dynamic fields need to be appended at a specific position. They need to be added after tb3.
Since one row can contain max of 4 elements, so any additional fields need to be pushed to next row. For Eg: If I get 3 dynamic td's from the database, then the new table needs to look like
label1 tb1 |label2 tb2 |label 3 tb3 |dynalabel1 dynatb1
dynalabel2 dynatb2 |dynalabel3 dynatb3 |label4 tb4
The label 4 and its value is a static component and so needs to be pushed to the end.
I have searched a lot but i can't find HTML column creation at a specific location.
I have tried to insert the dynamic fields in the table using JS, but they don't generate at the desired position.
Here the code i have written
var table = document.getElementById("myTable");
for(var i = 0; i < val ; i++){
// val is the number of td's needed
var td1 = document.getElementById('td1'); // get id of tb3
var text = document.createTextNode("some text");
td1.appendChild(text);
table.appendChild(td1);
var newField = document.createElement('input');
newField.setAttribute('type', 'text');
var newTd = document.createElement('td');
newTd.appendChild(newField);
var newTr = document.createElement('tr');
newTr.appendChild(newTd);
table.appendChild(newTr);
}
The above code generates the textboxes and the label "Some text", but not at the desired position. Can anyone please suggest how to go about solving this.

[edited]
$('<td>new cell</td>').insertAfter('table tr td:nth-child(3)')
[previous answer]
You could always do it the dirty way...
$('<tr><td>one</td><td>two</td><td>three</td></tr>').insertAfter('table tr:nth-child(3)')

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 !

How to focus on row in HTML Table?

Is it possible to focus on a specific HTML table row/cell with the help of Javascript? For instance, if this row is after the browser fold then the browser would scroll down to the row upon focus.
I have some JS code that searches an HTML table for a user's string input. I would then like for this code to focus on this word if it is found (Safari/Chrome browsers).
var targetTable = document.getElementById("accountTable");
for (var rowIndex = 1 + searchStart; rowIndex < targetTable.rows.length; rowIndex++)
{
var rowData = '';
rowData = targetTable.rows.item(rowIndex).cells.item(0).textContent;
if (rowData.indexOf(str) != -1)
{
//focus on the row?
}
}

You could give each row a HTML ID (either dynamically or statically depending on your needs) which matches the content and then use URI fragments to focus on it. You could basically use your current code and use
location.hash = rowData;
If the content matches the user input. This would of course be cumbersome if you've got whole sentences in the row you want to focus on, but for a simple table, it would work.

I was able to achieve this by using scrollIntoView().

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