We Keep Coding

JQuery: Table Row Show/Hide based on Column Value - javascript

I have a table that has a column with Yes/No as possible values
<table id="mytable">
<thead>
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
ActiveYN
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apple
</td>
<td>
12345
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Orange
</td>
<td>
67890
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Mango
</td>
<td>
456745
</td>
<td>
Yes
</td>
</tr>
I need to show the row if ActiveYN is 'Yes' and Hide id ActiveYN is 'No'
How can i access the ActiveYN inside JQuery and show/hide accordingly?

DEMO
$('button').on('click', function () {
var $rowsNo = $('#mytable tbody tr').filter(function () {
return $.trim($(this).find('td').eq(2).text()) === "No"
}).toggle();
});

How about something like this: $('td:contains("No")').parent().hide();
Live Demo
JS
$('input').click(function(){
$('td:contains("No")').parent().toggle();
});
HTML
<input type='button' value='hide/show' />
<table id="mytable">
<thead>
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
ActiveYN
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apple
</td>
<td>
12345
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Orange
</td>
<td>
67890
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Mango
</td>
<td>
456745
</td>
<td>
No
</td>
</tr>

usually I would add this as an attribute on the row:
<tr data-active="No">
....
</tr>
Then to hide them all you can do:
$(function(){
$("[data-active=No]").hide();
});
Or you can add different classes/styles based on the value when it creates the table.

You can do it from server side itself.
#if (item.ActiveYN) {
<tr style="display: none;">
} else {
<tr>
}
I don't know the razor syntax, but you get the idea.
To be able to do it from client-side, add a class.
#if (item.ActiveYN) {
<tr class="hideMe">
} else {
<tr>
}
And then in jQuery:
$('.hideMe').hide();
Edited again after your question was edited, now if we forget the server-side altogether:
$("mytable").find("tr:contains('No')").hide();
Use this statement in your button click handler function. But, remember it will also find any text which contains "No" anywhere in a row. To make it more precise, use regular expressions to search exactly a "No".

Related

I want to set same and different background color of Table rows where the column value matches previous or next row of same for same column.
For example, Check the below table.
<table class="table table-striped">
<thead class="table-light fw-semibold">
<tr class="align-middle">
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr class="align-middle">
<td>
John
</td>
<td>
25
</td>
<td>
Architect
</td>
</tr>
<tr class="align-middle">
<td>
John
</td>
<td>
35
</td>
<td>
Teacher
</td>
</tr>
<tr class="align-middle">
<td>
Jerry
</td>
<td>
30
</td>
<td>
Broker
</td>
</tr>
</tbody>
In the above table. The name column of the first row matches name of 2nd(next) row. So I want to set a different background color for both the matched rows.
How can I do that using JS/jQuery?

You may want to iterate the rows. I wasn't sure which columns you wanted to compare with the previous row, so I compared all columns and if any match, I mark those rows with a background.
var previous_values = new Array(100)
var previous_row = null;
document.querySelectorAll("tbody tr").forEach(function(row) {
var i = 0;
var found = false;
row.querySelectorAll("td").forEach(function(td) {
var value = td.innerText;
if (value == previous_values[i]) {
found = true;
}
previous_values[i] = value;
i++;
})
if (found) {
row.classList.add("bg-primary");
if (previous_row) {
previous_row.classList.add("bg-primary");
}
}
previous_row = row;
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<table class="table table-striped">
<thead class="table-light fw-semibold">
<tr class="align-middle">
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr class="align-middle">
<td>
John
</td>
<td>
25
</td>
<td>
Architect
</td>
</tr>
<tr class="align-middle">
<td>
John
</td>
<td>
35
</td>
<td>
Teacher
</td>
</tr>
<tr class="align-middle">
<td>
Jerry
</td>
<td>
30
</td>
<td>
Broker
</td>
</tr>
</tbody>

How to select all rows that are under column when clicking the header? say for example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Value 1
</td>
<td>
Value 2
</td>
<td>
Value 3
</td>
</tr>
<tr>
<td>
Value 1
</td>
<td>
Value 2
</td>
<td>
Value 3
</td>
</tr>
<tr>
<td>
Value 1
</td>
<td>
Value 2
</td>
<td>
Value 3
</td>
</tr>
<tr>
<td>
Value 1
</td>
<td>
Value 2
</td>
<td>
Value 3
</td>
</tr>
<tr>
<td>
Value 1
</td>
<td>
Value 2
</td>
<td>
Value 3
</td>
</tr>
</tbody>
</table>
What I want to achieve is that when I click Column 1 header it should select all the rows that are under that column like below example:
I am not quite sure how to implement this one. If someone has a good example then that would be appreciated! Cheers!

You could select could based on header cell index $(elem).index()
$(document).on('click', 'table thead tr th', function() {
let ind = $(this).index();
$('table').find('tbody').find('td').removeClass('active')
$('table').find('tbody').find('tr').each((a,b) => {
$(b).find('td').eq(ind).addClass('active')
})
})
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Value 1
</td>
<td>
Value 2
</td>
<td>
Value 3
</td>
</tr>
<tr>
<td>
Value 1
</td>
<td>
Value 2
</td>
<td>
Value 3
</td>
</tr>
<tr>
<td>
Value 1
</td>
<td>
Value 2
</td>
<td>
Value 3
</td>
</tr>
<tr>
<td>
Value 1
</td>
<td>
Value 2
</td>
<td>
Value 3
</td>
</tr>
<tr>
<td>
Value 1
</td>
<td>
Value 2
</td>
<td>
Value 3
</td>
</tr>
</tbody>
</table>

$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.

Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2

I have the following table structure:
<table>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tbody id="page-1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody id="page-2">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
I have tried the following jquery code to make scroll to specific tbody by id like:
page = 1;
$("#page-"+page).focus()
The above code failed to make scroll to the specified tbody. I also tried the following in order to get first tr but also failed:
page = 1;
$("#page-"+page+":first-child").focus()
The last thing that I have to mention, that tbody is loaded via ajax request and console.log($("#page-"+page).html()) works fine and prints out the html of the tbody

I have got the mistake. focus is not the suitable event for tbody in other words there is no point of focus for it. The solution is Run ScrollTop with offset of element by ID and using:
$('html, body').animate({
scrollTop: $('#page-'+page).offset().top -100
}, 2000);

I have a code which gets one of input's to show/hide some information when it's chosen.
$("input[name$='payment']").click(function() {
Everything works as it should, however, my website let's user to click whole table element to tick the input.
How can I tell jQuery to choose whole element, not only the small input ticker if my code looks like this:
<table cellspacing="0">
<tbody><tr class="moduleRowSelected" onmouseover="rowOverEffect(this)"">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="importantpaymentwithexternalinformation" type="radio"> </td>

You can target the tables containing those elements using .closest("table"):
$("input[name$='payment']").closest("table").click(function() {
// ------------------------^^^^^^^^^^^^^^^^^
Within the click handler, this will refer to the table. Since a user clicking the table may not click the radio button, you'll want to include code to do that for them:
$(this).find("input[name$='payment']").prop("checked", true);
Example:
$("input[name$='payment']").closest("table").click(function() {
$(this).find("input[name$='payment']").prop("checked", true);
});
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type1" type="radio"> Type 1</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type2" type="radio"> Type 2</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type3" type="radio"> Type 3</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>