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/
Related
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 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 am getting the values of the first column of a table and based on an if statement I need to update the value of the third column of each specific row.
This is what I do:
$("#attributes_tbl tr").each(function(){
var value = $(this).find("td input:nth-child(2)").val();
if (value in attribute_enumerations){
description = attribute_enumerations[value]
console.log(description)
$('td:nth-child(3) input').val(description);
}
});
The above snippet updates all the rows of the third column. What I need is to update the cell of the third column of the current row:
// I need this to update only the specific cell of the current row (from the "each" loop)
$('td:nth-child(3) input').val(description);
How can I specify this in jQuery?
To affect only the current row, change:
$('td:nth-child(3) input').val(description);
To:
$(this).find('td:nth-child(3) input').val(description);
I have logic for cells in a row to be highlighted when the first cell text is clicked working just fine. When the page loads however, I want to default the first row to be highlighted as the first row is displaying some other data based on it's id.
What works when the first cell text (id) is clicked is:
$("#simHeaderTable").find("tr").each(function () {
var tdID = $(this).find("td:first-child").text();
if (tdID == ID)
$(this).children("td").css("background-color", "#FFFF66");
else
$(this).children("td").removeAttr("style");
});
So my logic was that this finds all rows and loops over them. I checked the first cell in each row and if the cells text is equal to some id I "highlight" it with some css. I unhighlight all the others.
So now inside document ready to highlight the first row on page load I figured I would just do the following, which doesn't result in anything getting highlighted.
$("#simHeaderTable").find("tr:first-child").children("td").css("background-color", "#FFFF66");
To me, this finds the first tr/row and then finds all children that are cells/td and applies the css to set the background color to yellow. Any idea why this isn't working?
Your statement is much more complex than needed, instead of:
$("#simHeaderTable").find("tr:first-child").children("td").css("background-color", "#FFFF66");
try:
$("#simHeaderTable tr:first-child > td").css("background-color", "#FFFF66");
You can even leave out the '>' unless you have nested tables.
Usually, you only use .find() when you have a cached selector like:
var cached_obj = $('#something');
// lots of code
var cached_obj.find('.something_else');
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