I want to remove all rows apart from the row with id 'row0' from a table:
<table class="mytable">
<tr id="row0" class="myrow">
<td>aaa</td>
</tr>
<tr class="myrow">
<td>bbb</td>
</tr>
<tr class="myrow">
<td>ccc</td>
</tr>
</table>
But the following JQuery code removes ALL rows:
$('.mytable').children().not('#row0').remove();
Could someone explain why this happens? I would think that the child with id 'row0' would be excluded, but obviously that's not the case.
I have found another way to do this but still curious why the above method doesn't work:
$('.mytable').find('tr:not(#row0)').remove();
Because the children of a table element are thead, tfoot or tbody elements. A tbody element is always created in the generated DOM, even if it is not explicitly written in the HTML code.
You can also do:
$('.mytable tr').not('#row0').remove();
or
$('#row0').siblings().remove();
Related
This may seem like its been asked before, but before calling it a duplicate please fully read ;)
I have a table
<table id="MyTable">
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
<tr class="k-master-row k-state-selected"></tr>
<tr class="k-detail-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
</table>
Each row that has a class of 'k-master-row' can have a row of class 'k-detail-row'. If the k-master-row has a related k-detail-row then its directly below it like this
<tr class="k-master-row"></tr>
<tr class="k-detail-row"></tr>
Now the issue I am running into is that I need to remove all the k-detail-rows, EXCEPT the detail row that is this
<tr class="k-master-row k-state-selected"></tr>
<tr class="k-detail-row"></tr>
So if the k-master-row has a class of k-state-selected, I need to keep its k-detail-row and remove the other k-detail-rows.
I know I can remove the k-detail-rows by using
$('#MyTable .k-detail-row').remove()
but that removes all the k-detail-rows, which is not what I want..
So, in short, using either jquery or javascript, how do I remove all the detail rows that is not related to the master-row that has class of k-state-selected?
The logic appears to be that you wish to delete all .k-detail-row elements that do not immediately follow an element with k-state-selected.
In which case:
$('#MyTable :not(.k-state-selected) + .k-detail-row').remove();
In other words, delete all .k-detail-row elements whose immediately-preceding sibling is not an element with .k-state-selected.
What I want is to get a specific table column using jquery, so far what I have is this, that selects the first column:
table.find(tr > td:first-child)
But I want to be able to select any column so I can copy it to another table, is there a way to do this for example :
td:n-child
so I can send it the number of column and get all the data from that specific column.
Try this:
for instance for selecting the 2nd element, you would:
table.find("tr > td:nth-child(2)");
table.find("tr > td").eq(n);
I just wrote this from the heart, so I can't confirm if it works, but I think this is the syntax to do this.
:eq() Selector : Description: Select the element at index n within the matched set.
You could use :eq() Selector, e.g :
$('tr > td:eq(n)')
Hope this helps.
$('td:eq(2)').css('background-color','green')
$('tr:eq(2) td:eq(0)').css('background-color','red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr>
<td>1</td>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>2</td>
<td>A2</td>
<td>B2</td>
</tr>
<tr>
<td>3</td>
<td>A3</td>
<td>B3</td>
</tr>
</table>
I am trying to switch a table structure from
<table>
<tr>
<td><div id=1"></div>
</td>
<td><div id=2"></div>
</td>
</tr>
</table>
to
<table>
<tr>
<td><div id=1"></div>
</td>
</tr>
<tr>
<td><div id=2"></div>
</td>
</tr>
</table>
and back to the original structure using JavaScript, would appreciate your suggestions.
I strongly suggest you remove the table and simply float the divs as described here
CSS Floats 101
div {
float: left;
}
I also suggest you do not use numeric IDs which is allowed in HTML5 but not very compatible and makes JavaScript accessing it potentially confusing
More efficient will be to use method appendTo
// append new line first
$('table').append('<tr></tr>');
// move td to the new tr
$('table tr td').last().appendTo($('table tr').last());
I have html that displays a table similar to:
<table>
<tr>
<th>col1</th>
<th>col2</ht>
</tr>
<tr>
<td>0001</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2" id="detailsTable">
<table>
<tr>
<th>one</th>
<th>two</th>
</tr>
<tr>
<td>xxxxxx</td>
<td>xxxxxxx</td>
</tr>
</table>
</td>
</tr>
There is a column of expand and contract buttons on the outer table so that the nested table is only shown when the user clicks to expand.
The expansion works and the table gets displayed. However when when I try and remove the row from the outer table that contains the child table it doesn't work.
I had code like:
var rowIndex = $(this).parent().parent().prevAll().length;
$("table[id$=gvParentAccounts] tr").eq(rowIndex + 1).remove();
If the row only contains text it works as I'd like and removes the row, however if like in this case the row contains a table it is unable to remove the row as required.
I'm using ASP.Net and jQuery for this.
Thanks
Alan.
How about:
$(this).parent().parent().remove();
I'm not sure if this is exactly what you have, but here's a JSFiddle demonstrating that it works:
http://jsfiddle.net/9TQG9/1/
EDIT: Actually this:
$(this).parents("tr").eq(0).remove();
would be much nicer and more reliable. See here:
http://jsfiddle.net/9TQG9/2/
I have a table and I am highlighting alternate columns in the table using jquery
$("table.Table22 tr td:nth-child(even)").css("background","blue");
However I have another <table> inside a <tr> as the last row. How can I avoid highlighting columns of tables that are inside <tr> ?
Qualify it with the > descendant selector:
$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");
You need the tbody qualifier too, as browsers automatically insert a tbody whether you have it in your markup or not.
Edit: woops. Thanks Annan.
Edit 2: stressed tbody.
Untested but perhaps: http://docs.jquery.com/Traversing/not#expr
$("table.Table22 tr td:nth-child(even)").not("table.Table22 tr td table").css("background","blue");
Here is some code I used to do nested checkbox highlighting within a table. I needed to be able to do a "check all/uncheck all" but only within at a single level within the nesting; that is, I didn't want child elements getting selected as well.
var parentTable = $(this).parents("table:first");
var exclusions = parentTable.find("table :checkbox.select");
var checkboxes = parentTable.find(":checkbox.select").not(exclusions);
I'd get the first table above the current one I was in, get all the checkboxes below this newly found parent table, then exclude them from the complete list of checkboxes I could find. Basically, I was finding every checkbox, but then excluding any child checkboxes I found.
The same could be adapted in your case; replace the checkbox selection with columns instead.
Why not to use the advantages of html ?
Instead of
<table>
<tr>
<td>
...
</td>
</tr>
</table>
Try
<table>
<tfoot>
<tr>
<td>
...
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
...
</td>
</tr>
</tbody>
</table>
You can use the <thead> tag too to manipulate headers.
And now you can call the selector on
$("table.Table22 tbody tr td:nth-child(even)").css("background","blue")
Did you test the following?
$("table.Table22 tr td:nth-child(even):not(:last-child)").css("background","blue")
This page defines a nice function for selecting a column
http://programanddesign.com/js/jquery-select-table-column-or-row/