Find next row class after specific row class in each table rows - javascript

I need to hide unused toggle buttons with jQuery.
e.g. show toggle buttons only if after header <tr class="header"> next is data <tr class="data">
I have dynamic populated table that is as the code below:
<table>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
</table>


This will hide toggle buttons in which their parent rows with class header don't precede a row with class data:
$('.header').each(function() {
if(!$(this).next().hasClass('data')) {
$(this).find('.toggle').hide();
}
});
Fiddle

Related

how to delete Parent table without removing children table content?

How to delete Parent Table with all table attribute, without removing children table using jquery/javascript
<table>
<tr>
<td>Data</td>
<td>
<table>
<tr>
<td>A</td><td>B</td>
</tr>
</table>
</td>
</tr>
</table>
Output::
<table>
<tr>
<td>A</td><td>B</td>
</tr>
</table>

You can take inner table with unwrap and change html of parent element body in this case which will delete old table.
$('body').html($('table table').unwrap())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Data</td>
<td>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</td>
</tr>
</table>
Or you can take inner table, delete old one and then add inner table to parent element.
var table = $('table table').unwrap();
$('table').remove()
$('body').html(table)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Data</td>
<td>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</td>
</tr>
</table>

Get the last tr which id begins with Row_

I want to get with jQuery the greater id for all tr in a table.
If I have this table:
<table id="productsTable" style="width:100%;">
<thead>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr id="Row_0">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_1">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_3">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
I want to get the id Row_3.
I can use the :last selector, $( "tr:last" ) but it doesn't work because it returns the row for the <tfoot> section.
Maybe there is a way to add a filter to the :last selector to find the last tr with an id that begins with Row_.
Any advice?

You can use attribute start with selector:
$("tr[id^='Row_']:last" )

Assuming all the rows in tbody have the id just use tbody in selector
$( "tbody tr:last" )

You can use starts with
alert($("tr[id^='Row_']:last").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="productsTable" style="width:100%;">
<thead>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr id="Row_0">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_1">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_3">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
If you just want last tr inside tbody then use:
$("tbody tr:last")

Rearrange table rows in hardcoded table

I am unable to edit the HTML directly in a form and would like to move some things around. I created a very simplified version of what is going on below. So for example, if I would like to move the row with class "comments" to just below the row with class "matching" how could I do this on page load?
I tried doing something like:
$('tr.comments').closest('tr').after($('tr.matching').closest('tr'));
Here is the basic code, thank you for your help!! :)
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>

Try with this $('tr.matching').after($('tr.comments'));.
$('tr.matching').after($('tr.comments'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
</table>

$(".matching").after($(".comments"));

Sort HTML table which has children with jquery

I have the following table structure. I want to sort this by drag and dropping. Please note that I want the root pages to have children pages. I have it working with list with hierarchy but this makes styling for legacy browsers impossible.
<table>
<tr data-id="1">
<td>Page name</td>
<td>Other column</td>
</tr>
<tr data-id="2">
<td>Page name</td>
<td>Other column</td>
</tr>
<tr class="children" data-parent="2">
<table>
<tr data-id="3">
<td>Page name</td>
<td>Other column</td>
</tr>
<tr data-id="4">
<td>Page name</td>
<td>Other column</td>
</tr>
</table>
</tr>
</table>

Jquery nextUntil and row cells

There is a html table with the following structure:
<table>
<tr class="header">
<td><img id="test_click" src=""></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr class="header">
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
How can i hide all table rows between two using jquery?
This code does not work as i suspected :(
$("#test_click").click(function(){
$(this).parent().parent().nextUntil('tr.header').find('tr').hide();
});

nextUntill already selects your trs. No need to .find anything:
$("#test_click").click(function() {
$(this).parent().parent().nextUntil('tr.header').hide();
});
http://jsfiddle.net/nMBrw/

Categories

Resources