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
Related
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();
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 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);
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);
I am trying to modify the content of a particular column of a table whenever a cell is modified. The column is the one with the cell being modified in it.
Finding the index of the cell being modified in a particular row was quite straightforward. I found the table row and indexed it for the action.
But now I want to use that index to modify the column, including the trigger cell.
var childIndex = $this.closest('td').index(); // find index of trigger cell
var $allTableRows = $('tr'); // select all rows to index the particular cell
var aim = $allTableRows.children(childIndex); //search for target column here
I am making some mistake in passing the childIndex to the row-child criteria.
Can someone please point out my mistake.
Thanks!
I think if you use the following you'll get what you want:
var targetColumnInAllRows = $('tr td:nth-child(' + (childIndex + 1) + ')');
Note that while the index is zero-based, nth-child is one-based.