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();
Related
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(...);
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');
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/
Say I have a variable which holds a table row.
How would I get the row right before it using javascript/jquery?
This:
var prevRow = row.previousElementSibling;
or
var prevRow = $( row ).prev()[0];
([0] is used to "unwrap the jQuery object", to get the DOM reference to that row. If you want to perform jQuery methods on that row, you can just leave it inside, like $( row ).prev().addClass( '...' ); and in that case you don't need a new variable.)
Assuming that the two rows are siblings (not contained in separate tbody or thead elements):
$curRow = $(this); // or however you're getting the current `tr`.
$curRow.prev('tr');
Should get you the previous row.
Well you need to do something like so:
$("#cellID").parent().prev()
Your input is not sufficient but if i understand correctly here is the code for your requirement..
If your Variable contains table row id then $('#yourVariableName').prev('tr')[0] will work.
If your Variable contains table row Class then $('.yourVariableName').prev('tr')[0] will work.
If your Variable contains table row index then $(' table tr').eq(varValue).prev('tr')[0] will work.
But please specify what your variable will contain.
Let's say you want to get the input value from the td in the tr above the current one:
$('#id').prev().children('td').children(':text').val();
HTML
<tr id="rowId"><td><textarea class="inputTextarea"></textarea></td><td><textarea class="inputTextarea"></textarea></td></tr>
<tr id="rowId2"><td><textarea class="inputTextarea"></textarea></td><td><textarea class="inputTextarea"></textarea></td></tr>
<tr id="rowId3"><td><textarea class="inputTextarea"></textarea></td><td><textarea class="inputTextarea"></textarea></td></tr>
Provided I know rowId, how do I find the next textarea ON THIS PAGE, starting at any arbitary point. I don't mean ANY input, textarea only. I need to be able to start AT ANY row, and progress on to the next textarea, essentially going down the rows.
EDIT
Based on answers, I used the following code to traverse the textareas row by row:
var curElt = $('#' + startAt); //startAt is the first row id
for(var i=1; i < 10; i++) {
$(curElt).find('textarea').eq(0).val(i);
$(curElt).find('textarea').eq(1).val(i+1);
curElt = $(curElt).next();
}
You can use the next and find methods:
$('#' + current_row_id).next().find('textarea').eq(0);
next will get the next sibling, and then find will find all of the elements within the set that match the passed-in selector(s), then eq(0) will grab the first element in the resulting set returned from find.
$('#rowId2').find('textarea');
That will find both children of the row. If you want the first one, either:
$('#rowId2').find('textarea').eq(0); //jQuery object
$('#rowId2').find('textarea')[0]; //DOM Element
Edit: If you only know one row and want to find the first textarea in the next row:
$('#rowId').next().find('textarea').eq(0);
$textarea = $('#rowId textarea').eq(0);
$nextarea = $textarea.closest('tr').next().find('textarea').eq(0);
Just to clarify, $.fn.next() finds the next sibling in the DOM.
Starting from the textarea, first
you have to find its parent-tr (
$textarea.closest('tr') ).
From there, use next to find the next tr
( .next() )
Finally, find the first
textarea within that tr (
.find('textarea').eq(0) )
Try this:
$("#rowID textarea:first-child").val()