Getting the first table cell value in a column with jQuery - javascript

I have a table with some values. The first row and first column contain values of such called vertical and horizontal sizes respectfully. What I need to do is to click on a table cell and get the horizontal and vertical values for that clicked table cell. What it basically means - get the value of first table cell in the row where the clicked table cell is located and get the first table cell value of the column where the clicked table cell is located. I'm getting the horizontal value with the following code:
var horizSize = $('th:first', $(this).parents('tr')).text();
But I'm not sure how to do that for the vertical line. How to get to the first table cell value of the column?
Thanks for helping.

I think the following should work:
var verticSize = $('tr:first td').eq($(this).index()).text();
JS Fiddle demo.
Note that in the demo I've also amended your horizSize selector, to:
horizSize = $(this).closest('tr').find('td:first').text();
And subsequently refined to:
horizSize = $(this).prevAll('td:last').text();
The above assumes that you want the value of the cell from the :first tr element, whether that be in the thead or tbody. If you've marked up the heading cells as th then you'll need to amend the td of the selector to th.
Edited in response to Felix Kling's comment:
Instead of $('tr:first td'), $(this).closest('table').find('tr:first td') might be better (depending on the other markup).
That's something I should've thought of, myself, really. And, if there is more than one table in the document then this change would be essential, to demonstrate:
var verticSize = $(this).closest('table').find('tr:first td').eq($(this).index()).text();
JS Fiddle demo.
References:
closest().
eq().
find().
:first selector.
index().
:last selector.
prevAll().

You can navigate to the right cell with index:
$('table tr:gt(0)').each(function() {
var $valRow = $('table tr:eq(0)');
$(this).find('td:gt(0)').css( { background: "red" } ).click(function() {
var x = $valRow.find('td:eq(' + $(this).index() + ')').text(); // top row
var y = $(this).closest('tr').find('td:eq(0)').text(); // first cell of your row will be your first column cell
alert('x=' + x + '; y=' + y);
});;
});
Code: http://jsfiddle.net/uKhwq/1/

Related

How to selecting the row index of HTML table by search

I'm trying to find the index of a HTML table row that contains a given ID, the ID is in a known column (the last column). It needs to check if the table has that ID and then ultimately delete the row - I've come up with the following to find the index but I always get an index of -1
var index = $('#myTable td:contains(' + ID + ')').index($(this));
Any suggestions would be much appreciated, thanks
You don't need the index to remove a row. You can use the :contains selector to find the td then simply call remove() on the parent tr element:
$('#myTable td:contains("' + ID + '")').closest('tr').remove();
You need to find the TR element from your searched TD. You can step backward one step by issuing the closest() method.
So, you can find the index of the row the following way. Remember, index starts at 0:
var index = $('#myTable td:contains(' + ID + ')').closest("tr").index();
You can directly remove the TR also with the following line of code. This will remove all rows that contains ID in any cell:
$('#myTable td:contains(' + ID + ')').closest("tr").remove();

How to modify to every cell in last column in table using Jquery

I'm trying to modify every cell in last column in html table.
My first try is:
$('#example td:last').each(function(elem) {
//do something with elem
});
But above code modify only last cell in last column (so one cell instead of all cells in column).
How should I change selector to much all td in last column?
Try :last-child instead of :last.
You can do:
$('#example tr').each(function() {
var elem = $(this).find('td:last');
//do something with elem
});
Fiddle Demo
:last return a single element, the last element of the jQuery stack. It is exactly the same of doing :
var $td = $('#example td');
$td.eq($td.length - 1);
What you want is the CSS selector :last-child, which return the last child (huh).
$('#example td:last-child').each(...);

jQuery: Get First Column Value on Fourth Row (only) of HTML Table

I have a table named resultGridTable. I have a jQuery function to be executed on each row of the table. In the function, "this" means a row.
For the fourth row, I need to alert the first column value (of fourth row). I have the following code; but it does not work. How can we make it working?
For the fifth row, I need to alert the number of columns in the row. How can we do it?
In the sixth row's second column, I have two buttons (input type="submit"). I need to alert the second button's text/value. (The second button has a class named "secondButton") How can we do it?
Following is the code::
$('#resultGridTable tr').each(function (i)
{
//"this" means row
//Other operations in the row. Common for all rows
if(i==3)
{
//Specific Operation for fourth row
var columnValue = $(this 'td:nth-child(0)').val();
alert(columnValue);
}
});
READINGS:
jQuery Code: Starting from Parent to Child; not from Child to Parent
How to get value of first column in current row in html table using jQuery
How to get the first row's last column of an Html table using jQuery
Just to be different, you can mix up DOM and jQuery to good effect here since you have fixed offsets into the table:
var t = document.getElementById('resultGridTable');
// jQuery to get the content of row 4, column 1
var val1 = $(t.rows[3].cells[0]).text();
// no jQuery here to get that row length!
var val2 = t.rows[4].cells.length;
// DOM access for the cell, and jQuery to find by class and get the text
var val3 = $('.secondButton', t.rows[5].cells[1]).text();
These should all be substantially faster than using selectors.
Look into jQuery eq:
alert($('#resultGridTable tr:eq(3) > td:eq(0)').text());
alert($('#resultGridTable tr:eq(4) > td').length);
alert($('#resultGridTable tr:eq(5) > td:eq(1) > .secondButton').text());
If you have special values for rows/columns, consider adding a class to it, then you can use selectors rather than "magic" numbers which could change.
Adapted from Accepted Answer.
This is the code if you are using jquery instead of document.getElementById The difference is that you need to insert the array of [0].
var t = $('resultGridTable');
// jQuery to get the content of row 4, column 1
var val1 = $(t[0].rows[3].cells[0]).text();

jQuery syntax for finding row index in a HTML table

1) How do I find the row number/index in a HTML table? The generated table doesn't have any id for row.
eg: I have a plain HTML table generated, which has 10 rows,
I am adding rows dynamically to this table.(in between existing rows)
Since I am adding new row, the existing row index will change. Now I need to to find the index of each row before adding the new row.
"1) How do i find the row number/index in a HTML table? The generated table dosen't have any id for row."
If you mean that you already have a row, and you need its index, don't use jQuery to get it. Table rows maintain their own index via the rowIndex property.
$('table tr').click(function() {
alert( this.rowIndex ); // alert the index number of the clicked row.
});
Demo: http://jsfiddle.net/LsSXy/
To get the index of any element within a selector use index().
In your case it would be:
var rowIndex = $("#myTable TR").index();
In addition, you can use eq() to select a specific element in a group:
var thirdRow = $("#myTable TR").eq(2) // zero based .: 2 = 3rd element.
Read more on info
Read more on eq
The jQuery site is really good for finding functions, I always find myself going back to it all the time for reference and refresh. http://docs.jquery.com/
Or you can use css selectors in jquery like so
$('table tr td:first').addClass('first-row');

JQuery zebra stripe table that has groups of rows

I typically zebra stripe table rows for odd / even like so and it works well:
$("table tbody tr:visible:even",this).addClass("even");
$("table tbody tr:visible:odd",this).addClass("odd");
However, I have a data table where there are three consecutive rows for 1 set of data. The next three consecutive rows would be for the next set of data. So ideally I'd like to take the first three rows and add a class of even and then the next three rows after that to have a class of odd.
Here's something I whipped up on jsfiddle:
$("tr:nth-child(6n)").addClass("odd")
.prev().addClass("odd")
.prev().addClass("odd");
What this does is select every 6th tr element, set its class to odd, and the same to the previous two tr elements, thus giving you the result of 3 "grouped" rows.
More about the nth-child() selector here, and more about the prev() function here.
You could change the code to this to add an even class to the three rows preceding the ones with the odd classname:
$("tr:nth-child(6n)").addClass("odd")
.prev().addClass("odd")
.prev().addClass("odd")
.prev().addClass("even")
.prev().addClass("even")
.prev().addClass("even");
That looks like this.
Here is a solution that can work with more complex formulas.
http://jsfiddle.net/JRPmw/
You use jQuery's filter instead. You provide as complex an equation as you like and return true for rows you want.
$('tr').filter( function(n) {
var x = (n+1) % 6;
if (x >= 1 && x <= 3) return true;
}).addClass('threes');
Try use :nth-child selector :
$("table tbody tr:visible:nth-child(6n+1)").addClass("even");
$("table tbody tr:visible:nth-child(6n+2)").addClass("even");
$("table tbody tr:visible:nth-child(6n+3)").addClass("even");
$("table tbody tr:visible:nth-child(6n+4)").addClass("odd");
$("table tbody tr:visible:nth-child(6n+5)").addClass("odd");
$("table tbody tr:visible:nth-child(6n+6)").addClass("odd");
http://jsfiddle.net/fliptheweb/5Xnvu/

Categories