We Keep Coding

How to select only an element in the last row of a table using CSS selectors

I have a table with many expandable/collapsible rows that are hidden by labels until clicked (shown below). Input in the right-hand column of the table is meant to be edited and summed, so I have a function to set each cell to be .contentEditable and calculate the sum total of the user-entered numbers. However, because I do not want the sum itself (in the final row of the table) to be edited, I have the following restriction to the event handler in jQuery:
document.querySelectorAll("table tr:not(:last-child) td ~ td");
While the :not(:last-child) part gets rid of the issue of the editable final row, it creates another issue: now, the last rows of every expandable section (the "Jill" and "Jim" rows in the below example) are unable to be edited, too. Is there a way to fix this without making the absolute final row of the table ("Total") editable in the process?
To better visualize the issue, I've attached an example table that demonstrates the problem.
$(document).ready(function() {
$('.hide').hide();
$('[data-toggle="toggle"]').change(function() {
$("label[for='" + this.id + "'] span").toggle();
$(this).parents().next('.hide').toggle();
});
});
function editcell() {
let cellnum = document.querySelectorAll("table tr:not(:last-child) td ~ td");
cellnum.forEach(td => {
td.setAttribute("contentEditable", true);
td.addEventListener("change", getsum());
});
}
function getsum() {
let sum = 0;
let cellnum = document.querySelectorAll("table tr td ~ td");
let count = cellnum.length - 1;
for (i = 0; i < count; i++) {
sum += parseInt(cellnum[i].innerHTML) || 0;
}
cellnum[count].innerHTML = sum;
}
editcell();
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
label {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody class="section">
<tr>
<td colspan="2">
<label class="label" for="class1">
<b>Class 1</b>
<span>(Click this!)</span>
</label>
<input type="checkbox" name="class1" id="class1" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td id="jack" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>John</td>
<td id="john" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jill</td>
<td id="jill" oninput="editcell()">
<span>0</span>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">
<label class="label" for="class2">
<b>Class 2</b>
<span>(Click this!)</span>
</label>
<input type="checkbox" name="class2" id="class2" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Joe</td>
<td id="joe" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jane</td>
<td id="jane" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jim</td>
<td id="jim" oninput="editcell()">
<span>0</span>
</td>
</tr>
</tbody>
<tr>
<td style="font-weight:bold; text-align: center">Total</td>
<td id="total"></td>
</tr>
</table>

You can select (to ignore) the total cell as it has a unique id:
let cellnum = document.querySelectorAll("table tr td ~ td:not(#total)");
$(document).ready(function() {
$('.hide').hide();
$('[data-toggle="toggle"]').change(function() {
$("label[for='" + this.id + "'] span").toggle();
$(this).parents().next('.hide').toggle();
});
});
function editcell() {
let cellnum = document.querySelectorAll("table tr td ~ td:not(#total)");
cellnum.forEach(td => {
td.setAttribute("contentEditable", true);
td.addEventListener("change", getsum());
});
}
function getsum() {
let sum = 0;
let cellnum = document.querySelectorAll("table tr td ~ td");
let count = cellnum.length - 1;
for (i = 0; i < count; i++) {
sum += parseInt(cellnum[i].innerHTML) || 0;
}
cellnum[count].innerHTML = sum;
}
editcell();
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
label {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody class="section">
<tr>
<td colspan="2">
<label class="label" for="class1">
<b>Class 1</b>
<span>(Click this!)</span>
</label>
<input type="checkbox" name="class1" id="class1" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td id="jack" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>John</td>
<td id="john" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jill</td>
<td id="jill" oninput="editcell()">
<span>0</span>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">
<label class="label" for="class2">
<b>Class 2</b>
<span>(Click this!)</span>
</label>
<input type="checkbox" name="class2" id="class2" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Joe</td>
<td id="joe" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jane</td>
<td id="jane" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jim</td>
<td id="jim" oninput="editcell()">
<span>0</span>
</td>
</tr>
</tbody>
<tr>
<td style="font-weight:bold; text-align: center">Total</td>
<td id="total"></td>
</tr>
</table>

HTML <button> placed inside of a html table, tagged with id , not responding to jquery

I have a problem. I am currently developing an simple CRUD single page app, because i am learning ways of jquery. So what i wanted to do is to use buttons inside of a table to link people to the profile of the user in the table. Here is the code. that i have.
HTML Document:
<!DOCTYPE html>
<html>
<head>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Script.js"></script>
<script src="Scripts/jquery-3.3.1.js"></script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<div id="showpage">
<h2>Users list</h2>
<input id="search" style="float:right" type="text" placeholder="search...." />
<table id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Blogs</th>
<th>View Profile</th>
</tr>
<tr>
<td id="criteria">John Smith</td>
<td>20</td>
<td id="criteria">john#mail.com</td>
<td>10</td>
<td><button id="profilebutton">View</button></td>
</tr>
<tr>
<td id="criteria">Adam Smith</td>
<td>25</td>
<td id="criteria">adam#mail.com</td>
<td>2</td>
<td><button id="profilebutton">View</button></td>
</tr>
<tr>
<td id="criteria">Lily Smith</td>
<td>18</td>
<td id="criteria">jlily#mail.com</td>
<td>1</td>
<td><button id="profilebutton">View</button></td>
</tr>
<tr>
<td id="criteria">Trevor Philips</td>
<td>45</td>
<td id="criteria">trevrn#mail.com</td>
<td>3</td>
<td><button id="profilebutton">View</button></td>
</tr>
<tr>
<td id="criteria">Michael DiSanta</td>
<td>44</td>
<td id="criteria">mike#mail.com</td>
<td>1</td>
<td><button id="profilebutton">View</button></td>
</tr>
<tr>
<td id="criteria">Andrea Pirlo</td>
<td>47</td>
<td id="criteria">pirlo#mail.com</td>
<td>4</td>
<td><button id="profilebutton">View</button></td>
</tr>
</table>
</div>
<div id="profilepage">
<h2>ProfileName</h2>
<table>
<tr>
<td>Blog</td>
<td>Description</td>
<td>Date</td>
</tr>
</table>
</div>
</body>
</html>
Script.js :
$(document).ready(function () {
$('#profilepage').hide();
$(document).on('click', 'profilebutton', function () {
$('#showpage').hide();
$('#profilepage').show();
});
$('#search').keyup(function () {
search_table($(this).val());
});
function search_table(value) {
$('table tr').each(function () {
var found = 'false';
$(this).each(function () {
if ($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0) {
found = 'true';
}
});
if (found == 'true') {
$(this).show();
}
else {
$(this).hide();
}
});
}
});
As you can see i tried everything, from directly pointing to the button ( $('#profilebutton') ) to this , but nothing seems to work, i run the app (i am developing in asp.net platform), search code works just fine, but buttons in the table are unresponsive. Can someone please point out what am i doing wrong? I would be very grateful.

Try
$('#profilebutton').each(function(){ $(this).click(); })
instead of
$(document).on('click', 'profilebutton'...
As profilebutton represents an array/collection of buttons..

How can I post-process my html to collapse large tables?

I have a placeholder on my webpage that is filled with a html table of matches/mismatches between files. The problem is that there's a lot of data that fills the page which may be a lot to scroll through and I'd like to make each table collapsible.
Perhaps post processing on the html table to collapse all rows under a header and just have a "+" button or something to show the rows if the user wants.
I'd like to avoid adding non-native css dependencies if possible.
<br>
<label style="font-weight:bold;color:#c9d3e0"> Header1 </label>
<table>
<tbody>
<tr class="Header Row">
<td> (bunch of td cells for length of columns) </td>
</tr>
<tr class="Matched Row">
<td> (bunch of td cells for length of columns) </td>
</tr>
<tr class="Mismatched Row">
<td> (bunch of td cells for length of columns) </td>
</tr>
< /tbody>
</table>
<br>
(repeat for dynamic N tables)

I've adapted and tried to enhance my answer from this other question (Need of Recursive html table tree using only Javascript) to make it work with your example of data:
function nextTr(row) {
while ((row = row.nextSibling) && row.nodeType != 1);
return row;
}
document.getElementById("myTable").addEventListener("click", function(e) {
if (!e) return;
if (e.target.tagName !== "A") return;
e.preventDefault();
var row = e.target.closest("tr");
var cls = row.classList[0];
var lvl = +(cls.slice(-1)) + 1;
cls = cls.slice(0, -1) + lvl;
while ((row = nextTr(row)) && (row.className.includes(cls) || row.className.includes("open")))
row.classList.toggle("open");
});
// Select all the tr childs elements (all levels except 0)
var allChilds = document.querySelectorAll("tr:not([class*=level0])");
document.getElementById("openAll").addEventListener("click", function() {
allChilds.forEach(function(elm){
elm.classList.add("open");
});
});
document.getElementById("closeAll").addEventListener("click", function() {
allChilds.forEach(function(elm){
elm.classList.remove("open");
});
});
tbody tr {
display: none;
}
th, td {
padding: 4px 12px;
}
tr:first-of-type,
tr[class*="level0"],
tr.open {
display: table-row;
}
tr[class*="level0"] th { background: #ccc; }
tr[class*="level1"] td { background: #ddd; }
tr[class*="level2"] td { background: #eee; }
<button id="openAll">+ All</button>
<button id="closeAll">- All</button>
<br>
<label style="font-weight:bold;color:#c9d3e0"> Header1 </label>
<table id="myTable">
<tbody>
<tr class="level0">
<th><a>+/-</a></th><th>Header 1</th>
</tr>
<tr class="level1">
<td></td><td>Match 1</td>
</tr>
<tr class="level1">
<td></td><td>Match 2</td>
</tr>
<tr class="level0">
<th><a>+/-</a></th><th>Header 2</th>
</tr>
<tr class="level1">
<td></td><td>Match 1</td>
</tr>
<tr class="level1">
<td><a>+/-</a></td><td>Match 2</td>
</tr>
<tr class="level2">
<td></td><td>Match 2.1</td>
</tr>
<tr class="level0">
<th><a>+/-</a></th><th>Header 3</th>
</tr>
<tr class="level1">
<td></td><td>Match 1</td>
</tr>
<tr class="level1">
<td></td><td>Match 2</td>
</tr>
</tbody>
</table>
<br>
Using this code, you can have several levels.
Feel free to comment if anything.
I hope it helps in any way.

How do I set fixed table's size after clicking 'expand' button

I have a table which is hidden by default and can only be seen after clicking "expand" button. The problem is when I click the button, the whole tr where this button is located messes up. Here's what I mean
$(document).ready(function() {
$('.partTableContent').hide();
$('.expandButton').click(function() {
// .parent() selects the A tag, .next() selects the P tag
$(this).closest('tr').next(' tr').find('div.partTableContent').slideToggle(750);
});
});
<style>.partsTable {
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="partTableDiv">
<table class="partsTable" style="width: 100%; height: 30vh">
<tr>
<td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
<td class="sideForPartsTable">Title</td>
<td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td>
<td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td>
</tr>
<tr>
<td colspan="4">
<div class="partTableContent">
<table style="width: 100%">
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
</table>
</div>
</body>
See? When I click expand button, the whole tr's (where this button is located) height shrinks. Especially noticeable when click "Full page". How can I avoid it and make it the height static?

plz give a height for the first tr say height: 50px;
<table class="partsTable" style="width: 100%;">
<tr style="height: 30vh">
<td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
<td class="sideForPartsTable">Title</td>
<td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td>
<td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td>
</tr>

How to find a tr which has a specific class attached and get the details of each td - jquery

Please check out this fiddle
https://jsfiddle.net/shaswatatripathy/y7jqb5hp/7/
function getdetails(row) {
$("#tableID tbody tr").each(function() {
$(this).removeClass("highlightRowSelected");
});
$(row).addClass("highlightRowSelected");
}
function DetailsOfTheSelectedRows() {
$.each($("#tableID tbody tr.highlightRowSelected"), function() {
$('#txtBoxValue').value = $(this).find('td:eq(1)').text();
});
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.highlightRowSelected {
background-color: #e2e2e2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableID">
<tr onclick="getdetails(this)">
<th>checkbox</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Alfreds </td>
<td>Maria </td>
<td>Germany</td>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Centro </td>
<td>Francisco </td>
<td>Mexico</td>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Ernst </td>
<td>Roland </td>
<td>Austria</td>
</table>
<input type="button" onclick="DetailsOfTheSelectedRows()" value="Selected Row" />
<input type="text" id="txtBoxValue" />
in actual project whole tbody is dynamic , so dont change Html and getdetails(row) function
Table rows can have multiple class added to them dynamically .
My job is to get only that row which has that highlightRowSelected attached to it , get the first columns value and show it in text box
Jquery function DetailsOfTheSelectedRows has to be dynamic too so selector should be there and only one row will have that class name attached .
so how to write DetailsOfTheSelectedRows :

I changed your code as
function DetailsOfTheSelectedRows()
{
$.each($(".highlightRowSelected",'#tableID'), function () {
$('#txtBoxValue').val($(this).find('td:eq(1)').text());
});
}
Updated fiddle
https://jsfiddle.net/y7jqb5hp/9/
Check it

One-liner inside your DetailsOfTheSelectedRows() function...
function DetailsOfTheSelectedRows() {
$('#txtBoxValue').val($('#tableID tr.highlightRowSelected td:eq(1)').text())
}
Here's your fiddle, updated: https://jsfiddle.net/9cuoe5df/