Develop Reference

Is there a way of comparing the row of two selected tables in HTML?

I have multiple tables and i want to select any two tables and then perform some task on each row on click of a button(Calculate) . How can I access data of selected table so that i can compare their data for the task? Currently I am using checkbox to select the tables but stuck how to access the content of the tables for the comparison?
var selectedRows = document.getElementsByClassName('selected');
function inputChanged(event) {
console.log(table)
alert(selectedRows)
console.log(selectedRows)
event.target.parentElement.parentElement.className =
event.target.checked ? 'selected' : '';
}
.table_container{
float:left;
width:25%;
}
.container::after{
content: "";
clear: both;
display: table;
}
table{
margin: 0 auto;
border-radius: 10px;
}
tr{
padding: 15px;
text-align: center;
}
td{
color: black;
text-align: center;
vertical-align: middle;
border: 1px double white;
height: 50px;
background-color: #e1edf9;
width:272px;
}
.sub_text{
font-size: 12px;
font-style: italic;
color: #0071ce;
font-weight: 100;
}
th{
background-color: #0071ce;
text-align: center;
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
font-weight: bold;
}
.header{
color: #0071ce;
font-weight: bold;
padding: 10px;
}
<div class="container">
</div>
<div class="table_container">
<table id="plans">
<tr><th>Plan A
<input id="mycheck" type="checkbox" onchange="inputChanged(event)" />
</th></tr>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="plans" >
<tr><th>Plan B
<input id="mycheck" type="checkbox" onchange="inputChanged(event)" />
</th></tr>
<tr>
<td>$1386.20</td>
</tr>
<tr>
<td>HSA match:up to $1350</td>
</tr>
<tr>
<td>HSA match:up to $7010</td>
</tr>
<tr>
<td>$222</td>
</tr>
<tr>
<td>$55</td>
</tr>
<tr>
<td>$432</td>
</tr>
<tr>
<td>$300</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="plans">
<tr><th>Plan C</th></tr>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$1161.30</td>
</tr>
<tr>
<td>$513.30</td>
</tr>
<tr>
<td>$286.20</td>
</tr>
<tr>
<td>HSA match:up to $1350</td>
</tr>
<tr>
<td>HSA match:up to $1700</td>
</tr>
<tr>
<td>$80</td>
</tr>
</table>
<button onclick="Calculate()">Compare</button>
</div>
</div>

You mean
const container = document.getElementById("container");
document.getElementById("check").addEventListener("click", function() {
const checks = container.querySelectorAll(".select:checked")
if (checks.length >= 2) {
checks.forEach(chk => {
const table = chk.nextElementSibling;
console.log(table.querySelectorAll("td")[3].textContent)
})
}
})
td {
border: 1px solid black
}
<button type="button" id="check">Compare</button>
<div id="container">
<input type="checkbox" class="select">
<table>
<tbody>
<tr>
<td>Row 1</td>
<td>Table 1 Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Table 1 Row 2 Cell 2</td>
</tr>
</tbody>
</table>
<input type="checkbox" class="select">
<table>
<tbody>
<tr>
<td>Row 1</td>
<td>Table 2 Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Table 2 Row 2 Cell 2</td>
</tr>
</tbody>
</table>
<input type="checkbox" class="select">
<table>
<tbody>
<tr>
<td>Row 1</td>
<td>Table 3 Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Table 3 Row 2 Cell 2</td>
</tr>
</tbody>
</table>
</div>

Add input search box and fixed table header to html/css/javascript project

I'm working on a sample to accomplish the following:
Generate an html table of specific data (rows and columns will vary
in length and information).
Include a fixed header (the first two rows of the table should be fixed; with the remaining rows to scroll.
Input box to search all rows for entered letter(s).
Currently I can't get both of these options to work together and after clearing the input box the Search... box disappears. It should stay in the same row, right below the header and span all available columns.
My current test code:
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 50;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
<table border="1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>
<input id="myInput" type="text" placeholder="Search..">
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
I'm more of a vba, sql and C# developer, so this is defiantly outside of my expertise.
I'm not sure how to fix this.
Thanks,
Jeff

jQuery - Hide last child <td> from <table>

I want to hide if the hobby doesn't have value (empty). But if the hobby has value is still show. How to condition it? I try using jQuery.
$("tr:last-child td:last-child").css("font-weight","bold")
if($("tr:last-child td:last-child").length < 1){
$("tr:last-child").hide()
}
table{
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>

You can hide the .parent() tr if the .text() of the td is blank.
$("tr:last-child td:last-child").each(function(index, td) {
if($(td).text() === ""){
$(td).parent().hide();
}
});
table {
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
tr:last-child td:last-child {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>

You need to use text() to get the text of td
$("tr:last-child td:last-child").each(function(index,element){
$(element).css("font-weight","bold");
});
$("tr:last-child td:last-child").each(function(index,element){
if($.trim($(element).text()).length == 0){
$(element).parent().hide();
}
});
table{
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>

change this:
if($("tr:last-child td:last-child").length < 1){
$("tr:last-child").hide()
}
to:
if($("tr:last-child td:last-child").text().length < 1){
$("tr:last-child").hide()
}

jQuery Show/Hide Multiple Table Columns

I have this little table where I would like to hide some of the details with a simple button... let us say,
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid gray;
padding: 5px 10px;
}
<button>Show/Hide Details</button>
<table>
<thead>
<th>No</th>
<th>Full Name</th>
<th>Nickname</th>
<th>Age</th>
<th>Gender</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Revan D. Cole</td>
<td>Revan</td>
<td>22</td>
<td>Male</td>
<td>revan.dcole#domain.com</td>
<td>(+1) 123 123</td>
<td>D Cole Street</td>
</tr>
<tr>
<td>2</td>
<td>Mira Rosenfield</td>
<td>Mira</td>
<td>21</td>
<td>Female</td>
<td>mira.rosenfield#domain.com</td>
<td>(+2) 234 234</td>
<td>Rose Street</td>
</tr>
</tbody>
</table>
I wanted to hide this Email, Phone, and Address fields when the button is clicked, and it will shows the details again if we click it.

The right way to do this is to assign a class to all the info which you want to toggle. This really makes the solution simple.
I have assigned a class sensitive in this example, and toggled it when the button is clicked.
$("button").click(function() {
$(".sensitive").toggle();
})
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid gray;
padding: 5px 10px;
}
.sensitive {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show/Hide Details</button>
<table>
<thead>
<th>No</th>
<th>Full Name</th>
<th>Nickname</th>
<th>Age</th>
<th>Gender</th>
<th class="sensitive">Email</th>
<th class="sensitive">Phone</th>
<th class="sensitive">Address</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Revan D. Cole</td>
<td>Revan</td>
<td>22</td>
<td>Male</td>
<td class="sensitive">revan.dcole#domain.com</td>
<td class="sensitive">(+1) 123 123</td>
<td class="sensitive">D Cole Street</td>
</tr>
<tr>
<td>2</td>
<td>Mira Rosenfield</td>
<td>Mira</td>
<td>21</td>
<td>Female</td>
<td class="sensitive">mira.rosenfield#domain.com</td>
<td class="sensitive">(+2) 234 234</td>
<td class="sensitive">Rose Street</td>
</tr>
</tbody>
</table>

You want to hide last three child of td and th , you can select last three child by nth-last-child(-n+3) for more info
How does nth-last-child work
(-n+3)....
-1+3 = 2 --> nth-last-child(2)
-2+3 = 1 --> nth-last-child(1)
-3+3 = 0 --> nth-last-child(0)
$("button").click(function () {
$("tr td:nth-last-child(-n+3),th:nth-last-child(-n+3)").toggle();
});
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid gray;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show/Hide Details</button>
<table>
<thead>
<th>No</th>
<th>Full Name</th>
<th>Nickname</th>
<th>Age</th>
<th>Gender</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Revan D. Cole</td>
<td>Revan</td>
<td>22</td>
<td>Male</td>
<td>revan.dcole#domain.com</td>
<td>(+1) 123 123</td>
<td>D Cole Street</td>
</tr>
<tr>
<td>2</td>
<td>Mira Rosenfield</td>
<td>Mira</td>
<td>21</td>
<td>Female</td>
<td>mira.rosenfield#domain.com</td>
<td>(+2) 234 234</td>
<td>Rose Street</td>
</tr>
</tbody>
</table>

How do I remove a row from a table

Below code removes the row if it contains an empty cell in the 3rd column.
It makes use of Jquery's fadeOut-method for a nice effect.
Thing is that I can't get the code working without the faeOut method.
I tried $(this).remove(); but that does not work.
function TT(){
var A = 3;
$('table tbody tr td:nth-child(' + A + ')').each(function(index){
var cellValue = $("#tbl tr:eq(" + index + ") td:eq(" + A + ")").text();
if (cellValue.length === 0){
$(this).parents('tr').fadeOut(function(){
$(this).remove();
});
}
});
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td></td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td></td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
<tr>
<td>A7</td>
<td>B7</td>
<td>C7</td>
<td>D7</td>
<td>E7</td>
<td>F7</td>
<td>G7</td>
<td>H7</td>
</tr>
<tr>
<td>A8</td>
<td>B8</td>
<td>C8</td>
<td></td>
<td>E8</td>
<td>F8</td>
<td>G8</td>
<td>H8</td>
</tr>
<tr>
<td>A9</td>
<td>B9</td>
<td>C9</td>
<td>D9</td>
<td>E9</td>
<td>F9</td>
<td>G9</td>
<td>H9</td>
</tr>
<tr>
<td>A10</td>
<td>B10</td>
<td>C10</td>
<td>D10</td>
<td>E10</td>
<td>F10</td>
<td>G10</td>
<td>H10</td>
</tr>
<tr>
<td>A11</td>
<td>B11</td>
<td>C11</td>
<td>D11</td>
<td>E11</td>
<td>F11</td>
<td>G11</td>
<td>H11</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>

Multiple times you are querying “table” .which is not required. Only the first loop to iterate through all 3rd column elements is sufficient to find out if the cell is empty and to remove the complete row.
function TT(){
var A = 4;
$('table tbody tr td:nth-child(' + A + ')')
.each(function(index){
if($(this).text()=="" ) {$(this).parent().remove();}
});
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td>D5</td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td>D6</td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>

No need to use .each() you can just use .filter()
function TT(){
var A = 3;
$('table tbody tr').filter(function(){
return $('td:eq('+ A +')' , this).text() == ''; // good to use `.text().trim()` to avoid any white-spaces
}).remove();
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td></td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td></td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
<tr>
<td>A7</td>
<td>B7</td>
<td>C7</td>
<td>D7</td>
<td>E7</td>
<td>F7</td>
<td>G7</td>
<td>H7</td>
</tr>
<tr>
<td>A8</td>
<td>B8</td>
<td>C8</td>
<td></td>
<td>E8</td>
<td>F8</td>
<td>G8</td>
<td>H8</td>
</tr>
<tr>
<td>A9</td>
<td>B9</td>
<td>C9</td>
<td>D9</td>
<td>E9</td>
<td>F9</td>
<td>G9</td>
<td>H9</td>
</tr>
<tr>
<td>A10</td>
<td>B10</td>
<td>C10</td>
<td>D10</td>
<td>E10</td>
<td>F10</td>
<td>G10</td>
<td>H10</td>
</tr>
<tr>
<td>A11</td>
<td>B11</td>
<td>C11</td>
<td>D11</td>
<td>E11</td>
<td>F11</td>
<td>G11</td>
<td>H11</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>
Note: parent() , parents() , closest() all of those should work if you start from <td> .. but for me a simple thing is to start
from the <tr> not from the <td>
Another note: :nth-child(index) index starts from 1 .. and :eq(index) starts from 0