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).
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 am trying to add a value to a gridView column on a specific row via Javascript. Previously I have done this via .NET.
But now I want to try this alternative:-
document.getElementById('<%=GridView1.ClientID%%>').rows[1].cells[1].value = IDentification#;
This is obviously not the correct syntax. Any ideas?
It should be innerHTML not value
document.getElementById('<%=GridView1.ClientID%>')
.rows[1]
.cells[1]
.innerHTML= yourvariable; //or "astring"
This will insert the text in your variable to 2nd row's 2nd column of the table rendered by the gridview.
I'm trying to push data to an HTML table (TDs have ids) using tabletop.js. I can pull the entire array in one of the tds, but how do I pull in just one value from the array that the tabletop.js builds?
$.each( tabletop.sheets("schools").all(), function(i, name) {
var One = $('<p> '+ name.one + '</p>');
One.appendTo("td[id$=roundOne]");
})
This puts every value in the column 'one' spreadsheet in one td cell with a roundOne id. I only want the first value in the first roundOne td, then the second value in the second roundOne td etc.
Wrap your td selector in jquery, and then only select the ith element. When you select "td[id$=roundOne]", it selects all of the td's with that id.
Here's a working example. http://jsfiddle.net/TshQu/
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);