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/
Related
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) + "]");
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 .
So I've searched this forum and clicked almost every link even relevant to my problem so if I missed a blatant post about this I apologize. Here's my situation. I have some dynamically generated tables that all have the same css class (they have to for a check box I have that hides them). The thing is I want to hide tables that don't have any data in them but show the ones that do. I have pieced together some code but what I have ends up hiding all tables with the same CSS class if one of the tables are empty. I say empty but they all have at least one td and I'm counting if it only has one td to hide the table.
Here is the code I have at the moment....
<script type="text/javascript">
$(document).ready(function () {
$('.devTable').each(function (i) {
//select all tds in this column
var tds = $(this).parents('.devTable')
.find('tr td:nth-child(' + (i + 1) + ')');
if (tds.length <= 1) {
$(this).parent().hide();
}
})
});
</script>
I know it's something simple I'm missing.
can use filter(). I am basing this on any table of the class with no more than one <td>
$('.devTable').filter(function(){
return $(this).find('td').length <=1;
}).hide();
Reference: filter() API Docs
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 looking to grab a group of tables that have more than X rows with jQuery. Currently, I'm doing something similar to:
$("table").each(function(){
if($(this).find("tr").length > x){
tableArray[tableArray.length] = $(this);
}
});
and then acting on the members of the tableArray.
Is there a better way of getting these tables, perhaps a nice selector I've missed?
Thanks
Try using the :has selector:
$('table:has(tr:eq('+x+'))');
That would only grab tables that have a row x. Note that :eq() takes a zero-based index as its parameter, meaning if x is 1, tables containing 2 rows or more would be selected.
EDIT :has is falling over for me, with :nth-child and :eq. .has() (the method equivalent of the selector) works though:
alert($('table').has("tr:nth-child(2)").length)
Although, note that the parameter passed to nth-child is not zero-based like :eq is.
Example - alerts the number of tables found with 2 rows or more.
Check this one
http://api.jquery.com/nth-child-selector/
$("table tr:nth-child(" + (x + 1) + ")").parent();
Didn't test it, but should be close. Note, you may need two ".parent()" calls, depending on your table structure.
I think your way is fine, frankly.
One alternate way would be to use the :has selector in conjunction with nth-child: ask jQuery for $("tbody:has(:nth-child(4))).... This says "find all tables whose tbody elements have 4 or more children". Since the children of a tbody are typically tr elements, this will do the trick.