how to do show/hide only those tr if there last 2 td have same text.in this table i want to 3rd tr and 4th tr show hide. its have same value.
<table class="table table-zeroBorder sticky-table vrt_table" id="tabledata">
<thead >
<th > </th>
<th "> Alto STD </th>
<th > Alto LXI </th>
</thead>
<tbody >
<tr >
<td >Wheel Covers</td>
<td>
Center Cap
</td>
<td >
Full
</td>
</tr>
<tr >
<td >Body Coloured Bumpers</td>
<td >
-
</td>
<td >
yes
</td>
</tr>
<tr >
<td>Body Coloured Outside Door Handles </td>
<td >
yes
</td>
<td >
yes
</td>
</tr>
<tr>
<td >Body Side Molding</td>
<td >
-
</td>
<td >
-
</td>
</tr>
<tr >
<td >High-Mounted Stop Lamp</td>
<td >
yes
</td>
<td >
</td>
</tr>
</tbody>
</table>
My jquery code here.this jquery code hide all tr which have '-' value . in this table i want to 3rd tr and 4th tr show hide. its have same value.
$("#tabledata tbody tr td:contains('" + '-' + "')").filter(function () {
return $(this).text().trim() == '-';
}).parent().toggle();
You'd need to iterate all the <tr> elements, check the <td> contents and toggle visibility accordingly
$("#hide-rows").on("click", () => {
$("#tabledata tbody tr").each((_, tr) => {
// Wrap the <tr> in a jQuery object
const $tr = $(tr)
// get the last two <td> children
const cells = $tr.find("td").slice(-2)
// get all the unique values
const values = new Set(cells.map((_, { textContent }) =>
textContent.trim()).get())
// Toggle the <tr>
$tr.toggle(values.size === 1)
// or without using a Set
// $tr.toggle(cells.eq(0).text().trim() === cells.eq(1).text().trim())
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="tabledata"> <thead > <th > </th> <th> Alto STD </th> <th > Alto LXI </th> </thead> <tbody > <tr > <td >Wheel Covers</td><td> Center Cap </td><td > Full </td></tr><tr > <td >Body Coloured Bumpers</td><td > - </td><td > yes </td></tr><tr > <td>Body Coloured Outside Door Handles </td><td > yes </td><td > yes </td></tr><tr> <td >Body Side Molding</td><td > - </td><td > - </td></tr><tr > <td >High-Mounted Stop Lamp</td><td > yes </td><td > </td></tr></tbody></table>
<p><button id="hide-rows" type="button">Hide rows</button></p>