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.
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();
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).
I have a Datatable with information, and a fieldset with a table full of text inputs. The user should be able to add new rows according to the information values, but these rows are not correctly adding. Clearly the tr is being cloned and added (emptied where needed), the corresponding values are appending but the pagination is not being updated for Datatables. I cannot figure out how to correctly use .fnAddData() to get the job done here. On top of that, I don't know how to go about the "Permissions" column - getting checkboxes to convert to text for the table. Any ideas? Thanks in advance.
http://jsfiddle.net/BWCBX/28/
jQuery
$('#addRow').click(function () {
var tbody = $('#example tbody');
var tr = tbody.find('tr:first').clone();
tr.find('td:first').text($(".engine").val());
tr.find('td:eq(1)').empty();
tr.find('td:eq(2)').empty();
tr.find('td:eq(3)').text($(".version").val());
tr.find('td:eq(4)').empty();
tr.appendTo(tbody);
});
There are good examples on how to use fnAddData in the API docs.
I have rewritten your JS according to example provided in docs. I've extracted checkboxes checking into separate function to mantain high readability. The updated fiddle is here.
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);