I am trying to write a jquery function that will step through a series of grid cells in my DOM and change their color.
I can select the first cell with this $('#container [hex-row=x][hex-column=y]').
Next, I want to select the cell that is in the column above and and row behind. Something like $('#container [hex-row=x-1][hex-column=y+1]').
I am assuming you can't do math on an attribute in the selector. I am new to this so any hints would be appreciated.
You have to do it outside the quote marker, like this
$('#container [hex-row="'+(x-1)+'"][hex-column="'+(y+1)+'"]');
As the selector is a string you can not directly calculate in it. But what you can do is append the calculated value to the string like this
$("#container[" + (your calculation here + "][" + (your calculation here) + "]");
Related
I am trying to grab a product number which is in the first column of this table, and create a last column to append this product number in a link. Each number has a PDF file of the same name.
Essentially I want to grab the first <td> value in a row, and append another <td> with that value to the end of that row.
I can append the table row with static icons and links, but I cannot figure out how to make each row display the product number that is in the first td of that same row.
$('#table tbody').each(function() {
var $partNumber = $('tr:not(.row0) td.column0').html();
$('tr:not(.row0)').append('<td><a class="button button-inverse button-block button-small" href="/writable/data-sheets/' + $partNumber + '.pdf"><i class="fal fa-file"></i></a></td>')
});
Remember that in general a jquery object represents any number of HTML elements. The each method iterates over those elements. (Not their children.) I assume there's only one id="table" element, and it only contains one <tbody>, so your loop only runs once.
When the loop runs, $('tr:not(.row0) td.column0') is a jquery object, which contains several HTML elements, namely the first <td> in each row except for the first row. Also, it's not localised to $('#table tbody'), so if there's another table somewhere with td.column0 elements it will pick up those too. But anyway... $partNumber will be the inner HTML of the first element in the jquery object, which is the first cell in the second row.
Then, the next line will generate a jquery object appending (a copy of) the new element to the end of every row. Note that these new cells will be exact copies of each other, since they all use the same value of $partNumber.
So, if my analysis is correct, your code adds a new column in the correct place, but all the links are to the href that the first row is supposed to link to. Is this what you're seeing?
To fix this: Firstly, you want to iterate over the rows, not the table bodies. Then, inside your anonymous function, you need to get the row you're currently on. The documentation for each says this can be done using arguments to the function.* So if you change it to function(n, element), element will represent the <tr> element. That's not a jquery object, but you can get a jquery object with $(element). From there you can get the first <td> inside it using the find method. And the rest is as you've done it.
In summary:
$('#table tbody tr:not(.row0)').each(function(n, element) {
var $element = $(element);
var $partNumber = $element.find('td.column0').html();
$element.append('<td><a class="button button-inverse button-block button-small" href="/writable/data-sheets/' + $partNumber + '.pdf"><i class="fal fa-file"></i></a></td>')
});
* You can also do it using this; the syntax is slightly shorter, but personally I don't like the idea of this in javascript. But it's up to you.
I want to get a text of cell in a tr row.
The tr row has class attr and a data- attr.
I select the tr row as
var k = $('tr[class="BatchTypesRow"][data-rowselected="true"]');
then
var m = k.children("td:first");
var sBtype = m.text();
alert(sBtype);
the sBtype contains all cells' text in the row.
I tried
var sBtype = m[0].text();
that catches an exception.
So what is the problem here?
If the cell is not the first cell in the row, how to do it?
Here, m itself is the first td of the row since var m = k.children("td:first");
So m.text() would not give the whole row as long as td:first is selected. If you use .children("td") then you would be getting the whole row in m.text(). So in your code,
var sBtype = m.text();
alert(sBtype);
would actually give the First cell content.
If not the first cell, you would be using var m = k.children("td"); removing the keyword first. In this case m[0] would have the first cell, m[1] second and so on.
Correct me if am wrong, I believe this is how you got the exception, using m[0].text() would throw you an exception since m[0],m[1] are not JQuery object. They are HTMLTableCellElement Object.
To use it as a JQuery object, you would have to use $(m[1]).text().
And if you know which element to be selected w.r.t its sequence, you can use
var m = k.children("td:nth-child(n)");
where you can replace n with the number so that you will select the nth td of the row.
Hope this helps.
$('tr.selected td:first-child').text();
Firstly, select the tr within which lies the text.for which you can use the class attr
$("tr.BatchTypesRow")
then traverse down the tree to get the td ie its children
$("tr.BatchTypesRow").children("td")
as you need the first child ,is the first td as you traverse through the selected tr ,it can be further written as
$("tr.BatchTypesRow").children("td:first")
if the text lies within a label inside the selected td
$("tr.BatchTypesRow").children("td:first").children("label").text();
will give you the desired text .
I have a table that automatically adds new rows, once u go to the last cell and tab over.
I click on one of the cells - I want to know the rowIndex of the clicked cell (row)
I havent been able to uniquely identify the cell using any attribute eg classname etc, ID is randomly generated. Name , TagName everything is generic - Same for all rows.
How do I get the rowIndex just using a cell's info
No jquery sols pls - not allowed in my framework
You can grab this info from the parent node tr as rowIndex:
td.parentNode.rowIndex
Here td is HTMLTableCellElement element.
td has a reference to its parent row element parentNode (tr), which in its own turn has a property rowIndex. Similarly td itself has a property cellIndex.
Demo: http://jsfiddle.net/prFSd/1/
dfsq provides a good answer, but it uses jquery which you said you could not use. You could put this in each rowonclick="myFunction(this)"then define the function
function myFunction(x)
{
alert("Row index is: " + x.rowIndex);
}
I'm trying to get my head around jQuery, but I have trouble figuring out plain arrays vs jQuery arrays, and DOM elements vs jQuery elements.
So here's an example I try to do. The example is simple really, but I need some hand-holding :-p so I'll be verbose in my requirements hoping that the answers will be, in turn, descriptive.
I have two <select> drop-downs, with IDs #version and #target.
When I click a button, I want to select in #target the option following with the same name as the last-but-one value in #version. (the item WILL exist)
Example: #version has options: a,b,c,x. #target has options a,b,c,d,h,m.
I click the button. What should happen is:
read the last-but-one option in #version: "c"
find the option with the same name in #target: the 3rd (i.e. index is 2)
set the selected value in #target to the one after "c", i.e. "d" (the 4th, index 3)
Here's a fiddle with the example.
For the 1st step, I think I figured it out:
var latestVersion = $("#version option").get(-2).text;
//side-note: why does .text work but not .val() ? oh, .get() returns a DOM element
// so How do I get back to a jQuery element?
// $($("#version option").get(-2)).val() works but looks ugly
For step 2, I tried this:
var target = $("#target option:contains(latestVersion)");
but it doesn't work. And there's GOT to be a better way than manually iterating all the values searching for the right one.
Step 3: ??.
Using 1st step as you figured try the following:
$('#button').click(function(){
var latestVersion = $("#version option").get(-2).text;
//index of LAST-BUT-ONE
var target=$("#target option[value="+latestVersion+"]").index();
//Setting next index value
$("#target").prop("selectedIndex",target + 1);
});
http://jsfiddle.net/GpBDY/16/
.val() does not work on an option element, but it does work on a select element:
var v = $( "#version" ).val();
gives you the element selected in the dropdown #version.
The following line will not do what you want:
var target = $("#target option:contains(latestVersion)");
That is because latestVersion is treated as the value "latestValue" and not as the name of a variable. To use the value of the variable latestValue, put latestValue outside the string like:
... contains(" + latestVersion + ")...
You might be interested in the jQuery method .next() in combination with your code in step 2 to get the value of the next option element. Be aware that if there is no next element, the value will be "undefined".
You can do this using nth-child to select value of version and using that set the value of target this way:
$('#button').click(function(){
var latestVersion = $("#version option:nth-child(3)").text();
$("#target").val($('#target option[value="'+latestVersion+'"]').next().text());
});
Demo Fiddle
i am not sure i understand you are looking for, but i think that you want something like this:
$('#button').click(function(){
var arrVersion = $("#version option");
var latestVersion = $(arrVersion[arrVersion.length - 2]).val();
$("#target").val(latestVersion);
var actualSelected = parseInt($("#target").prop("selectedIndex"));
$("#target").prop("selectedIndex", actualSelected + 1);
});
http://jsfiddle.net/GpBDY/9/
Here is the question I tried to learn from
jQuery selector to grab cells in the same column
Before any of the answers using index and nth-child had been proposed I was thinking along the lines of counting number of cells before $(this) cell - e.g.
var columnNo = parentRow.nextUntil($(this),"td").length;
console.log(columnNo); // gives 0 - what am I missing?
parentTable.find("tr td:nth-child(" + (columnNo+1) + ")")
http://jsfiddle.net/mplungjan/JUt4F/
Questions:
why does the nextUntil not give the length of the preceding cells?
2. why does the click only work once?
Please note that I know (before asking this) I can use index. I just wanted to fix my script to explore nextUntil
UPDATE: I seem to mix nextAll and nextUntil and likely imagined some kind of nextAllUntil
The nextUntil() method will find the first td tag in the parent row. With that logic, you're only going to select the first cell in each row. The click is working everytime--you're just coloring the same column red over and over.
What you need to do is search for all td tags on the parent row and use jQuery's index() method to identify the position of the clicked cell in that row.
A very small tweak will fix the problem:
$("td").on("click",function(){
var parentTable = $(this).closest("table");
var parentRow = $(this).parent();
console.log(parentRow);
var columnNo = parentRow.find('td').index($(this));
console.log(columnNo);
parentTable.find("tr td:nth-child(" + (columnNo+1) + ")")
.css("color", "red");
});
Working example: http://jsfiddle.net/JUt4F/15/