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>
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>
$("#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 need to create HTML table using jQuery dynamically and also I need to make multiplication between rows and columns. My rows is yield and column is price. I have two variables a and b.
var a; //represent price
var b; // represent yield
Now I need to create table and multiplication like this:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" scope="col">Yield</th>
<th colspan="7" scope="col">Price</th>
</tr>
<tr>
<td>a-1.5</td>
<td>a-1</td>
<td>a-0.5</td>
<td>a</td>
<td>a+0.5</td>
<td>a+1</td>
<td>a+1.5</td>
</tr>
<tr>
<th scope="row">b-500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b</th>
<td> </td>
<td> </td>
<td> </td>
<td>a*b</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
http://jsfiddle.net/nexetdad/
So columns is based on price +/- and rows are based on yield +/-. How I can create with JavaScript table matrix so every cell need to be calculated (a*b)?
Please give me some ideas. I don't know where to start.
I think you are lack of DOM skill.
You can refer it.
<head>
<script type="text/javascript">
function addlabel(s,n){
if (n > 0){
return s + "+" + String(n);
}
else if (n < 0){
return s + String(n);
}
else{
return s;
}
}
function multiplicationTable(){
x = document.getElementById("i1").value;
x = parseInt(x);
y = document.getElementById("i2").value;
y = parseInt(y);
var table = '<table border="1px"><thead>';
table += '<tr><th></th>'
for (var a = -1.5; a<= 1.5 ; a+=0.5){
table += '<th>'+ addlabel("a", a) +'</th>';
}
table += '</tr></thead><tbody>'
// add num
for (var b = y-500, ob = y; b<= y+500 ; b+=100){
table += "<tr>";
table += "<td>" + addlabel("b",b-ob) + "</td>"
for (var a = x-1.5; a<= x+1.5 ; a+=0.5){
table += '<td>'+ a*b +'</td>';
}
table += "</tr>";
}
return table + '</tbody></table>';
}
function build(){
document.getElementById('here').innerHTML = multiplicationTable();
}
</script>
</head>
<body>
<form name="f">
<input type="text" value ="15" name="r" id="i1">
<input type="text" value ="5000" name="c" id="i2">
<input type="button" value="make table" onclick="build()">
</form>
<div id="here">
</div>
</body>
https://jsfiddle.net/tonypythoneer/z5reeomj/2/
Although i dont know much about js and jquery you can mix them and this could be done. Go for nested for loop for creating your table and use append() of jquery for appending the content of table and simple multiplication.
By the way this can done easily using php.
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".