I have found other questions through which I learned how to hide the first row and the (first row's) first cell using;
$('table#truetable tr:first').hide();
and
$('table#truetable td:first').hide();
But what if I want to hide for example the first cell of the second row using this approach?
$('#truetable tr:eq(1) td:first').hide();
:eq docs
jQuery(':eq(index)')
index
Zero-based index of the element to match.
$('table#truetable tr:eq(1) td:first-child').hide();
theres a css selector for this:
:nth-child(N)
N is the index of the child +1 in the selection
Related
Is it possible to remove element with duplicate class name in td ? Example: There are multiple td in table in td there should be only one class .price1 and .price2 if there are duplicates it should remove them and leave only original one in td. Thank you very much for help or advice.
Example:
<td>.price1 .price2</td> <- original one ,
<td>.price1 .price2<br />.price1 .price2</td> <- duplicate
Try,
$("#relevanttable tr td:has('.price1,.price2'):not(:first)").remove();
DEMO
In jquery how do I get the first table row that contains <td>s
So far my code looks like this but its not working?
$('#mytable tr').has('td:first').html();
thanks
You could find the first td's parent.
$("#mytable td:first").parent().html();
You could try
$($("#mytable").find('tr')[0]).find('td')
In this case you can iterate through rows and fetch the tds
$($($("#mytable").find('tr')[0]).find('td')[0]).text()
$($($("#mytable").find('tr')[0]).find('td')[1]).text()
Try to use this:
$("#mytable td:first ").parents('tr').html();
Try this, jQuery maintains the element indices while selecting them -
$('#mytable td').eq(0).parent();
So in effect, this will select the first td in your table and return the parent, which should be a tr element, by convention
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');
Let's say I have a table with these rows:
<table>
<tr id="before_dynamic_rows"></tr>
<tr id="after_dynamic_rows"></tr>
</table>
Using jQuery, I insert automatically generated rows (search results) before the after_dynamic_rows row. How can I delete a range of rows, namely - you guess it - the ones between the row with the id before_dynamic_rows and the row after_dynamic_rows? (In order to be able, after having inserted them, to remove them and insert different ones.)
var response = ajax.responseText;
$('#after_dynamic_rows').before(response);
That's how I insert the new rows. Considering the first answer: how can I assign a class to whatever the response text may be?
This answer is based on a literal interpretation of the question with the idea that the only rows which should be removed are those rows that are in between #before_dynamic_rows element and #after_dynamic_rows.
See working version at: http://jsfiddle.net/7wBzd/
var $rows = $("tr");
$("tr:lt("+ $rows.index($("#after_dynamic_rows")) +"):gt("+ $rows.index($("#before_dynamic_rows")) +")").remove();
$("table tr:gt(0)").not("#after_dynamic_rows").remove();
Try it out here.
Note if #after_dynamic_rows is the last row, then you can just do:
$("table tr:gt(0)").not(":last").remove();
or:
$("table tr:gt(0):not(:last)").remove();
...and if there are rows before #before_dynamic_rows, just do:
$("table tr:not(#before_dynamic_rows, #after_dynamic_rows)").remove();
I would assign a class to those added rows to make them easy to select, but you could select all tr children and use the 'not' method to remove the two you want to keep.
$("table tr").not("#before_dynamic_rows").not("#after_dynamic_rows").remove();
I would like to remove the second row of my table with jquery.
I have tried:
$("tr:second").remove();
But this unfortunately doesnt work :( Any suggestions?
You need to use
$("tr:eq(1)").remove();
It's zero based, so index 1 is your second row
use nth-child selector
$("table tr:nth-child(2)").remove();
$("tr:eq(1)").remove();
second row has number 1
You can use the ':eq()' selector to achieve this:
// The eq() selector is zero based so the second
// row will be tr:eq(1)
$("tr:eq(1)").remove();
See the documentation at:
http://api.jquery.com/eq-selector/
try $("tr:nth-child(1)").remove()
http://api.jquery.com/nth-child-selector/