Jquery selecting td for nested tables - javascript

I have a child table declared inside a parent table row and I would like to toggle the visibility of the child table when a cell of the parent table has been clicked. The child table should be by default hidden when the page loads.
My click event on the parent td element (class showmore) is being detected but I am having trouble finding the right selector for changing the css property of the parent tr element(class order_extra_info) which contains the child table. By setting css property display:none on this row I would like to entirely hide the child table contained within.
With the current jquery code it seems I am selecting the child td. Any suggestions?
$(document).on('click', 'td.showmore', function() {
var id = ($(this).html());
if ($('tr.order_extra_info#' + id + ' td').is(":visible")) {
$('tr.order_extra_info#' + id + ' td').css("display", "none");
} else {
$( 'tr.order_extra_info#' + id + ' td' ).css("display","table-cell");
}
});
.order_extra_info {
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
</td>
<td class="text-right">ID </td>
<td class="text-left">Status</td>
<td class="text-right">Total</td>
<td class="text-left">Date</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1545</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_info" id="1545">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra 1</td>
<td class="text-left" width="25%">Extra 2</td>
<td class="text-left" width="50%">Extra 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>


Use $('tr.order_extra_info#' + id).toggle();
Your selector was correct but you are trying to check visibility and based on trying to show/hide which was wrong.
Instead of those redundant step only use .toggle() function of jquery.
Please check below snippet for more unserstanding.
$(document).on('click', 'td.showmore', function() {
var id = ($(this).html());
$('tr.order_extra_info#' + id).toggle();
});
.order_extra_info {
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
</td>
<td class="text-right">ID </td>
<td class="text-left">Status</td>
<td class="text-right">Total</td>
<td class="text-left">Date</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1545</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_info" id="1545">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra 1</td>
<td class="text-left" width="25%">Extra 2</td>
<td class="text-left" width="50%">Extra 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>


You can do it like following using toggle().
$(document).on('click', 'td.showmore', function() {
$(this).closest('tr').next('tr.order_extra_info').toggle()
});


Just use .toggle()
$(document).on('click', 'td.showmore', function() {
var id = $(this).html();
$('tr.order_extra_info#' + id).toggle();
});
.order_extra_info {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
</td>
<td class="text-right">ID</td>
<td class="text-left">Status</td>
<td class="text-right">Total</td>
<td class="text-left">Date</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1545</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_info" id="1545">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra 1</td>
<td class="text-left" width="25%">Extra 2</td>
<td class="text-left" width="50%">Extra 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>


$(document).on('click', 'td.showmore', function() {
var id = ($(this).html());
$('#'+ id).toggle();
});
.order_extra_info {
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
</td>
<td class="text-right">ID </td>
<td class="text-left">Status</td>
<td class="text-right">Total</td>
<td class="text-left">Date</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1545</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_info" id="1545">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra 1</td>
<td class="text-left" width="25%">Extra 2</td>
<td class="text-left" width="50%">Extra 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>


Use jQuery .toogle() and CSS3 :nth-child() Selector
$(document).ready(function(){
$(".order_extra_info").each(function(){
$(this).click(function () {
$(this).next().toggle(".order-extra-infor-shown");
});
});
});
.order-extra-infor-shown {
display:inline !important;
}
.table tr:nth-child(2n){
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
</th>
<th class="text-right">ID </th>
<th class="text-left">Status</th>
<th class="text-right">Total</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr class="order_extra_info">
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1545</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_infos" id="1545">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra 1</td>
<td class="text-left" width="25%">Extra 2</td>
<td class="text-left" width="50%">Extra 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="order_extra_info">
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1546</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_infos">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra a</td>
<td class="text-left" width="25%">Extra b</td>
<td class="text-left" width="50%">Extra c</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Related

Add dynamically rowspan with Javascript/ jQuery

I am trying to add dynamically rowspan to my table, I am totally new in the programming world so I am still learning. This is my table::
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>School 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>
So if I add a new student to the table, I need to adjust rowspan so I was wondering if there is a way to add that automatically when I add a new student:
For example currently, if I add a new student my table is totally messed up:
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>Shool 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>
I know that I can adjust rowspan but I want to do this via Javascript/jQuery, can anybody try to help me with this?

This works
Add a tbody per building
Calculate the rows in each building
Plain JS
document.querySelectorAll("table tbody")
.forEach(tb => tb.querySelector(".build-name")
.setAttribute("rowspan",tb.querySelectorAll("tr").length))
document.querySelectorAll("table tbody")
.forEach(tb => tb.querySelector(".build-name")
.setAttribute("rowspan",tb.querySelectorAll("tr").length))
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>Shool 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>
jQuery
$("table tbody").each(function() {
$(this).find(".build-name").attr("rowspan", $(this).find("tr").length)
})
$("table tbody").each(function() {
$(this).find(".build-name").attr("rowspan", $(this).find("tr").length)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>Shool 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>

localstorage setitem for every block in <table>

I have this contenteditable table on my website.
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1></td>
<td id="p1d2" tabindex=2></td>
<td id="p1d3" tabindex=3></td>
<td id="p1d4" tabindex=4></td>
<td id="p1d5" tabindex=5></td>
<td id="p1d6" tabindex=6></td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>
I want to save every block with id on localstorage. I know I can use localStorage.setItem("p1d1", $('#p1d1').text()); to save these, but is there a better way to save all of these blocks without going like
localStorage.setItem("p1d1", $('#p1d1').text());
localStorage.setItem("p2d1", $('#p2d1').text());
localStorage.setItem("p3d1", $('#p3d1').text());
through the whole thing? I need to call each of them by their id later on.
Thank you.

You can use document.querySelectorAll('td[id^=p]') to select all the td that has id that startsWith p.
const tds = Array.from(document.querySelectorAll('td[id^=p]'));
tds.forEach(td => {
const id = td.id;
const text = td.innerText;
console.log(id, text);
})
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1>text of p1d1</td>
<td id="p1d2" tabindex=2>text of p1d2</td>
<td id="p1d3" tabindex=3>text of p1d3</td>
<td id="p1d4" tabindex=4>text of p1d4</td>
<td id="p1d5" tabindex=5>text of p1d5</td>
<td id="p1d6" tabindex=6>text of p1d6</td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>

Personally I would store it in one key instead of tons of keys. Simple reduce statement can let you gather all of the data.
var cells = document.querySelectorAll('td[id^="p"]')
function save() {
const data = Array.from(cells).reduce(function (o, td) {
o[td.id] = td.innerHTML;
return o
}, {})
console.log(data)
//window.localStorage("data", JSON.stringify(data))
}
function loadData () {
var data = window.localStorage("data")
if (data) {
var obj = JSON.parse(data)
Object.entries(obj).forEach( function (entry) {
document.getElementById(entry[0]).innerHTML = entry[1]
})
}
}
save()
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1></td>
<td id="p1d2" tabindex=2></td>
<td id="p1d3" tabindex=3></td>
<td id="p1d4" tabindex=4></td>
<td id="p1d5" tabindex=5></td>
<td id="p1d6" tabindex=6></td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>

I would recommend adding a class to each cell:
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1 class="periodCell"></td>
<td id="p1d2" tabindex=2 class="periodCell"></td>
<td id="p1d3" tabindex=3 class="periodCell"></td>
<td id="p1d4" tabindex=4 class="periodCell"></td>
<td id="p1d5" tabindex=5 class="periodCell"></td>
<td id="p1d6" tabindex=6 class="periodCell"></td>
</tr>
Then doing something along the lines of the following:
$('.periodCell').each(function(index, elem)
{
localStorage.setItem(elem.id, elem.textContent);
});
you could do some other things with the selector so that you're not needing to add the class to every cell, but this is the most basic option...
another is regex on the cell ids... but that would be pretty painful

Display Single Table Cells in Row on Checkbox Clicked

I currently have a multiple column table with one column being a column full of checkboxes. Whenever I check a checkbox, I want an extra cell to appear on the right side of the table. Currently, when I check a checkbox, it displays the entire column, but I am wanting it to only display the cell that is in the corresponding row.
How can I do this?
My PHP/HTML code:
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc"></td>
<td class="rp-code" align="center"></td>
<td class="sku"></td>
<td class="special-id" align="center"></td>
<td class="description"></td>
<td class="quantity" align="center"></td>
<td class="unit"></td>
<td style="display: none;" class="quantity_num"></td>
</tr>
<?php } ?>
</tbody>
</table>
My JavaScript Code:
$(function () {
$(".check").change(function(){
$("#merchTable th.num").toggle(this.checked);
$("#merchTable td.quantity_num").toggle(this.checked);
});
});
I have changed my code to make it work with a JSFiddle so you can see something for an example of what I currently have and what is going on:
https://jsfiddle.net/d8494316/

Change your JS code to this:
$(function () {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked)
});
});
Here's a snippet:
$(function () {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked);
console.log($('input.check').is(':checked'))
if($('input.check').is(':checked'))
$(this).closest('table').find('th.num').toggle(true);
else
$(this).closest('table').find('th.num').toggle(false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="merchTable" cellspacing="10" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
</tbody>
</table>

It's enough to change this line:
$("#merchTable td.quantity_num").toggle(this.checked);
to:
$(this).closest('td').nextAll(" td.quantity_num").toggle(this.checked);
In order to preserve the first column toggled if there are more than one checked element you can change:
$("#merchTable th.num").toggle(this.checked);
to:
$("#merchTable th.num").toggle($("#merchTable td.quantity_num:visible").length > 0);
This line must be added as last line.
Updated jsfiddle

Change a table element content with jQuery

I'm trying to modify the contents of specific <td>'s unsuccessfully.
The idea is to change the script word 'S/JUROS' to ' C/JUROS' from 8x.
Any suggestions for the best way to do this? I already managed to rescue the values ​​in an array, but got caught at this stage.
https://jsfiddle.net/diasbass/23swmsvn/
jQuery(document).ready(function($) {
if (jQuery(".tbl-payment-system").length) {
var getTexts = [];
$(".tbl-payment-system tr td.parcelas").each(function() {
getTexts.push($(this).text())
});
var resultTexts = '"' + getTexts.join('", "') + '"';
console.log(resultTexts);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/diasbass/23swmsvn/

You can use :contains(), .add(), general sibling selector ~, .map(), .replace(), .get(). Note, not clear if requirement is to change text of html td element or only text stored at array? If expected result is for td element text to be changed you can use .text(function(index, originalText) {}) where new text is returned
jQuery(document).ready(function($) {
if (jQuery(".tbl-payment-system").length) {
var getTexts = [];
var x = $(".tbl-payment-system tr:contains(8X)");
var resultTexts = x.add($("~ tr", x)).map(function() {
return $("td.parcelas", this).text(function(_, text) {
return text.replace(/S(?=\/)/, "C")
}).text()
}).get();
console.log('"' + resultTexts.join('", "') + '"');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>https://jsfiddle.net/23swmsvn/3/
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>
jsfiddle https://jsfiddle.net/23swmsvn/5/

Take a look at this
$("td").each(function(){
if (parseInt($(this).text()) >= 8){
$(this).text(($(this).text()).replace("S/JUROS","C/JUROS"));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>

Find 8X using :contains, then go it its parent and nextUntil the end. Then addBack to include 8X and get each rows :first-child.
Then each over them to update the text:-
var elements = $('table td:contains(8X)').parent().nextUntil().addBack().children(':first-child');
elements.each(function() {
$(this).text($(this).text().replace('S/JUROS', 'C/JUROS'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>

how to align my td's with equal width?

this is my html code:http://jsfiddle.net/Udxyb/427/
in the below code..Under each of these columns(section1, section2, section3, section4) i want two equal columns and these columns with should not vary if the input data is lenghty.
instead the width of both columns must remain the same rather than increase.is it possible???
<table id="main_table" style="width:100%">
<thead>
<tr class="firstline">
<th colspan="2">Column1</th>
<th colspan="2">Column2</th>
<th colspan="2">Column3</th>
<th colspan="2">Column4</th>
</tr>
</thead>
<tbody>
<tr style="width:1002px; background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td style="width:125px;">item 111sdfgadgrfag</td>
<td>item 112</td>
<td>item 113</td>
<td>item 114</td>
<td>item 115</td>
<td>item 116</td>
<td>item 117</td>
<td>item 118dfgdfgdfgdfgg</td>
</tr>
<tr>
<td colspan="2">item 121</td>
<td colspan="2">item 122</td>
<td colspan="2">item 123</td>
<td colspan="2">item 124</td>
</tr>
<tr>
<td colspan="2">item 131</td>
<td colspan="2">item 132</td>
<td colspan="2">item 133</td>
<td colspan="2">item 134</td>
</tr>
</tbody>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td> <td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">item 211</td>
<td colspan="2">item 212</td>
<td colspan="2">item 213</td>
<td colspan="2">item 214</td>
</tr>
<tr>
<td colspan="2">item 221</td>
<td colspan="2">item 222</td>
<td colspan="2">item 223</td>
<td colspan="2">item 224</td>
</tr>
<tr>
<td colspan="2">item 231</td>
<td colspan="2">item 232</td>
<td colspan="2">item 233</td>
<td colspan="2">item 234</td>
</tr>
</tbody>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">item 311</td>
<td colspan="2">item 312</td>
<td colspan="2">item 313</td>
<td colspan="2">item 314</td>
</tr>
<tr>
<td colspan="2">item 321</td>
<td colspan="2">item 322</td>
<td colspan="2">item 323</td>
<td colspan="2">item 324</td>
</tr>
<tr>
<td colspan="2">item 331</td>
<td colspan="2">item 332</td>
<td colspan="2">item 333</td>
<td colspan="2">item 334</td>
</tr>
</tbody>
</table>

Write:
#main_table{table-layout:fixed;}
Updated fiddle here.

Assign fixed table layout property to your table and word-wrap:break-word; for the td's
Hope that will solves your problem
<table id="main_table" style="width:100%;table-layout:fixed;">
in css
td {
padding: 5px;
word-wrap:break-word;
}

Categories

Resources