Javascript - Json from table with "parent" and "childrens" rows - javascript

I need to get values (via checkbox selection) from multiple rows of a table to build a json. I have rows considered children belonging to a parent row (class=primary color). The parent row will always be inserted into the json and the selected child rows will be added to this. The json format should look like this:
parentRow{
name: string,
surname: string,
work: string,
country: int,
birthday: string,
hobbyes: string
ChildRows[
ChildRow{
childname: string,
childage: int
},
ChildRow{
childname: string,
childage: int
}
]
};
Also a parent row can contain infinite child rows so I would need something that dynamically insert "ChildRow" objects inside the json.
posting the html i am using:
$(function () {
$(".docRow").on("click", function () {
var parentRow = [];
$("table > tbody > tr").each(function () {
var $tr = $(this);
var $trh = $('tr.table-primary').first();
if ($tr.find(".docRow").is(":checked")) {
parentRow.push({
name: $trh.find(".name").text(),
surname: $trh.find(".surname").text(),
work: $trh.find(".work").text(),
country: $trh.find(".country").text(),
birthday: $trh.find(".birthday").text(),
hobbyes: $trh.find(".hobbyes").text(),
childRows: [{
childRow: {
childname: $tr.find(".childname").text(),
childage: $tr.find(".childage").text(),
}}
]
})
;
}
});
console.clear();
console.log(JSON.stringify(parentRow));
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col" style="max-width: 36px;"></th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Work</th>
<th scope="col">Country</th>
<th scope="col">Birthday</th>
<th scope="col">Hobbyes</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Mark</td>
<td class="surname">White</td>
<td class="work">Lawyer</td>
<td class="country">USA</td>
<td class="birthday">26/05/1993</td>
<td class="hobbyes">Tennis, Music</td>
</tr>
<tr>
<td><input class="form-check-input doceRow" type="checkbox"></td>
<td class="childname">Laura</td>
<td class="childage">5</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Maurice</td>
<td class="childage">10</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Bryan</td>
<td class="childage">2</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Patricia</td>
<td class="surname">Mallon</td>
<td class="work">Manager</td>
<td class="country">Germany</td>
<td class="birthday">05/07/1976</td>
<td class="hobbyes">Mode, Cooking, Reading</td>
</tr>
<tr>
<td><input class="form-check-input fileRow" type="checkbox"></td>
<td class="childname">David</td>
<td class="childage">8</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Wuei</td>
<td class="surname">Zong</td>
<td class="work">Marketing</td>
<td class="country">China</td>
<td class="birthday">01/01/1945</td>
<td class="hobbyes">Bricolage, Manual Work, Sleep</td>
</tr>
<tr>
<tr>
<td><input class="form-check-input fileRow" type="checkbox"></td>
<td class="childname">Philips</td>
<td class="childage">12</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input fileRow" type="checkbox"></td>
<td class="childname">Alice</td>
<td class="childage">22</td>
<td colspan="4"></td>
</tr>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
</body>
</html>

You can loop through only table-primary rows . Then , inside this use nextUntil() to get all trs until next table-primary rows and check if checkbox inside tr are checked or not depending this push your json inside array and pass same to parentRow.
Demo Code :
$(function() {
$(".docRow").on("click", function() {
var parentRow = [];
console.clear()
//loop through only tr.primary row..
$("table > tbody > tr.table-primary").each(function() {
var $tr = $(this);
var child_row = [] //for child..json array
//loop through trs ..until next promary row
$(this).nextUntil('.table-primary').each(function() {
if ($(this).find("input:checkbox").is(":checked")) {
//push values...
child_row.push({
childname: $(this).find(".childname").text(),
childage: parseInt($(this).find(".childage").text()),
})
}
})
if ($tr.find(".docRow").is(":checked")) {
//change to tr = current row..
parentRow.push({
name: $tr.find(".name").text(),
surname: $tr.find(".surname").text(),
work: $tr.find(".work").text(),
country: $tr.find(".country").text(),
birthday: $tr.find(".birthday").text(),
hobbyes: $tr.find(".hobbyes").text(),
childRows: child_row //pass here
});
}
});
console.log(JSON.stringify(parentRow));
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col" style="max-width: 36px;"></th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Work</th>
<th scope="col">Country</th>
<th scope="col">Birthday</th>
<th scope="col">Hobbyes</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Mark</td>
<td class="surname">White</td>
<td class="work">Lawyer</td>
<td class="country">USA</td>
<td class="birthday">26/05/1993</td>
<td class="hobbyes">Tennis, Music</td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Laura</td>
<td class="childage">5</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Maurice</td>
<td class="childage">10</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Bryan</td>
<td class="childage">2</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Patricia</td>
<td class="surname">Mallon</td>
<td class="work">Manager</td>
<td class="country">Germany</td>
<td class="birthday">05/07/1976</td>
<td class="hobbyes">Mode, Cooking, Reading</td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">David</td>
<td class="childage">8</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Wuei</td>
<td class="surname">Zong</td>
<td class="work">Marketing</td>
<td class="country">China</td>
<td class="birthday">01/01/1945</td>
<td class="hobbyes">Bricolage, Manual Work, Sleep</td>
</tr>
<tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Philips</td>
<td class="childage">12</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Alice</td>
<td class="childage">22</td>
<td colspan="4"></td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

Related

Jquery - Find closest previous <tr> by class at checkbox clicking. the checkbox is inside a <td>

I need to find the previous and closest element (".table-primary") to the td that contain the input ("checkbox").
If i check the checkbox inside the "David" row it should find the "Patricia" row element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col" style="max-width: 36px;"></th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Work</th>
<th scope="col">Country</th>
<th scope="col">Birthday</th>
<th scope="col">Hobbyes</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Mark</td>
<td class="surname">White</td>
<td class="work">Lawyer</td>
<td class="country">USA</td>
<td class="birthday">26/05/1993</td>
<td class="hobbyes">Tennis, Music</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Laura</td>
<td class="childage">5</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Maurice</td>
<td class="childage">10</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Bryan</td>
<td class="childage">2</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Patricia</td>
<td class="surname">Mallon</td>
<td class="work">Manager</td>
<td class="country">Germany</td>
<td class="birthday">05/07/1976</td>
<td class="hobbyes">Mode, Cooking, Reading</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">David</td>
<td class="childage">8</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Wuei</td>
<td class="surname">Zong</td>
<td class="work">Marketing</td>
<td class="country">China</td>
<td class="birthday">01/01/1945</td>
<td class="hobbyes">Bricolage, Manual Work, Sleep</td>
</tr>
<tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Philips</td>
<td class="childage">12</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Alice</td>
<td class="childage">22</td>
<td colspan="4"></td>
</tr>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
</body>
</html>
I have already tried using closest() e prev(). But it doesn't seem to work, I don't understand why.
You can use .prevAll() to do that:
$(document).on('change', '.form-check-input', function() {
console.log($(this).closest('tr').prevAll('.table-primary').first().text())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col" style="max-width: 36px;"></th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Work</th>
<th scope="col">Country</th>
<th scope="col">Birthday</th>
<th scope="col">Hobbyes</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Mark</td>
<td class="surname">White</td>
<td class="work">Lawyer</td>
<td class="country">USA</td>
<td class="birthday">26/05/1993</td>
<td class="hobbyes">Tennis, Music</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Laura</td>
<td class="childage">5</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Maurice</td>
<td class="childage">10</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Bryan</td>
<td class="childage">2</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Patricia</td>
<td class="surname">Mallon</td>
<td class="work">Manager</td>
<td class="country">Germany</td>
<td class="birthday">05/07/1976</td>
<td class="hobbyes">Mode, Cooking, Reading</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">David</td>
<td class="childage">8</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Wuei</td>
<td class="surname">Zong</td>
<td class="work">Marketing</td>
<td class="country">China</td>
<td class="birthday">01/01/1945</td>
<td class="hobbyes">Bricolage, Manual Work, Sleep</td>
</tr>
<tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Philips</td>
<td class="childage">12</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Alice</td>
<td class="childage">22</td>
<td colspan="4"></td>
</tr>
</tbody>
</table>
</div>
You need use parent function and after make a loop of prev elements, running the hasClass function for meet the condition and after access to name class.
$("input[type='checkbox']").click(function(){
if($(this).is(":checked") && $(this).parent().parent().parent().is("tbody")){
let p = $(this).parent().parent();
while(!$(p).hasClass("table-primary")){
p = $(p).prev();
}
console.log($(p).children(".name").text());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col" style="max-width: 36px;"></th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Work</th>
<th scope="col">Country</th>
<th scope="col">Birthday</th>
<th scope="col">Hobbyes</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Mark</td>
<td class="surname">White</td>
<td class="work">Lawyer</td>
<td class="country">USA</td>
<td class="birthday">26/05/1993</td>
<td class="hobbyes">Tennis, Music</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Laura</td>
<td class="childage">5</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Maurice</td>
<td class="childage">10</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Bryan</td>
<td class="childage">2</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Patricia</td>
<td class="surname">Mallon</td>
<td class="work">Manager</td>
<td class="country">Germany</td>
<td class="birthday">05/07/1976</td>
<td class="hobbyes">Mode, Cooking, Reading</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">David</td>
<td class="childage">8</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Wuei</td>
<td class="surname">Zong</td>
<td class="work">Marketing</td>
<td class="country">China</td>
<td class="birthday">01/01/1945</td>
<td class="hobbyes">Bricolage, Manual Work, Sleep</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Philips</td>
<td class="childage">12</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Alice</td>
<td class="childage">22</td>
<td colspan="4"></td>
</tr>
</tbody>
</table>
</div>

Find text in table and smoothly scroll to that position on table and also highlight this row

I have a simple table with some data and i want to scroll to a specific position based on date & highlight that row and based on the which day of Ramadan it is.
Let us say its 13 Ramadan which would be on 25-04-2021 then i have to scroll to that position and highlight the row in RED or any other color.
So far i am finding text and changing the color and i am doing same for scroll but scroll is not working not sure where i am doing it wrong..
This page feature is specially required for mobile version so that user is scroll to the right position on page etc
https://codepen.io/KGuide/pen/jOyLWNR
//$(window).scrollTop($("*:contains('05-05-2021'):last").offset().top);
//$(window).scrollTop($("*:contains('25-04-2021')").offset().top);
$(window).scrollTop($("*:contains('25-04-2021')"));
$("tr:contains('25-04-2021')" ).css( "color", "red" );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-w ">
<table class="ramadan-table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Day</th>
<th scope="col">Ramadan</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Date" data-label="Date">13-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">1</td>
</tr>
<tr>
<td class="Date" data-label="Date">14-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">2</td>
</tr>
<tr>
<td class="Date" data-label="Date">15-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">3</td>
</tr>
<tr>
<td class="Date" data-label="Date">16-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">4</td>
</tr>
<tr>
<td class="Date" data-label="Date">17-04-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">5</td>
</tr>
<tr>
<td class="Date" data-label="Date">18-04-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">6</td>
</tr>
<tr>
<td class="Date" data-label="Date">19-04-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">7</td>
</tr>
<tr>
<td class="Date" data-label="Date">20-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">8</td>
</tr>
<tr>
<td class="Date" data-label="Date">21-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">9</td>
</tr>
<tr>
<td class="Date" data-label="Date">22-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">10</td>
</tr>
<tr>
<td class="Date" data-label="Date">23-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">11</td>
</tr>
<tr>
<td class="Date" data-label="Date">24-04-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">12</td>
</tr>
<tr>
<td class="Date" data-label="Date">25-04-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">13</td>
</tr>
<tr>
<td class="Date" data-label="Date">26-04-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">14</td>
</tr>
<tr>
<td class="Date" data-label="Date">27-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">15</td>
</tr>
<tr>
<td class="Date" data-label="Date">28-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">16</td>
</tr>
<tr>
<td class="Date" data-label="Date">29-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">17</td>
</tr>
<tr>
<td class="Date" data-label="Date">30-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">18</td>
</tr>
<tr>
<td class="Date" data-label="Date">01-05-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">19</td>
</tr>
<tr>
<td class="Date" data-label="Date">02-05-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">20</td>
</tr>
<tr>
<td class="Date" data-label="Date">03-05-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">21</td>
</tr>
<tr>
<td class="Date" data-label="Date">04-05-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">22</td>
</tr>
<tr>
<td class="Date" data-label="Date">05-05-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">23</td>
</tr>
<tr>
<td class="Date" data-label="Date">06-05-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">24</td>
</tr>
<tr>
<td class="Date" data-label="Date">07-05-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">25</td>
</tr>
<tr>
<td class="Date" data-label="Date">08-05-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">26</td>
</tr>
<tr>
<td class="Date" data-label="Date">09-05-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">27</td>
</tr>
<tr>
<td class="Date" data-label="Date">10-05-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">28</td>
</tr>
<tr>
<td class="Date" data-label="Date">11-05-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">29</td>
</tr>
<tr>
<td class="Date" data-label="Date">12-05-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">30</td>
</tr>
</tbody>
</table>
</div>
Use $(window).scrollTop($("*:contains('25-04-2021')").parent('tr').offset().top);
Jquery scroll needs the offset of html tag.
Demo: https://jsfiddle.net/qtkwr7ny/

calculating sum and subtraction of table row using jquery

i want to calculate sum of all columns, and subtraction of col1 and col2 only, i found few examples online to add row data but how i can perform both action on one row. using class or id name.
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th >column two</th>
<th >column three</th>
<th >sum of all columns</th>
<th >subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
<td class="col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col1">43</td>
<td class="col2">432</td>
<td class="col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick = "calculate()">calculate</button>
jquery:
function calculate(){
var col1=$('.col1').text();
var col2=$('.col2').text();
var col3=$('.col3').text();
var sum= col1+col2+col3;
var subtract= col1-col2;
$(".sum").text(sum);
$(".subtract").text(subtract);
}
JSFiddle
Loop through all the table tr and use .find() on the columns you need. I added .col on each of the value columns so we won't need to specify the three columns on addition.
function calculate() {
var sum;
var difference;
$("tbody tr").each(function() {
sum = 0;
difference = 0;
$(this).find(".col").each(function() {
// console.log($(this).html());
sum += parseFloat($(this).html());
});
difference = parseFloat($(this).find(".col1").html()) - parseFloat($(this).find(".col2").html());
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(difference);
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th>column two</th>
<th>column three</th>
<th>sum of all columns</th>
<th>subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col col1">1</td>
<td class="col col2">2</td>
<td class="col col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col col1">43</td>
<td class="col col2">432</td>
<td class="col col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick="calculate()">calculate</button>
Here's the answer using input fields;
$(document).ready(function() {
$("#calculate").on("click", function() {
var sum;
var difference;
$("tbody tr").each(function() {
sum = 0;
difference = 0;
$(this).find(".col").each(function() {
// console.log($(this).html());
sum += parseFloat($(this).find("input").val());
});
difference = parseFloat($(this).find(".col1").find("input").val()) - parseFloat($(this).find(".col2").find("input").val());
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(difference);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th>column two</th>
<th>column three</th>
<th>sum of all columns</th>
<th>subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col col1"><input value="1" /></td>
<td class="col col2"><input value="2" /></td>
<td class="col col3"><input value="3" /></td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col col1"><input value="43" /></td>
<td class="col col2"><input value="432" /></td>
<td class="col col3"><input value="33" /></td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate">Sum
</button>
Please check this working example.
var col1=0,col2=0,col3=0,sum=0,subtract=0;
function calculate(){
$(".jsTableBody tr").each(function(){
col1=$(this).find('.col1').text();
col2=$(this).find('.col2').text();
col3=$(this).find('.col3').text();
sum= parseInt(col1) + parseInt(col2)+ parseInt(col3);
console.log(sum);
subtract= parseInt(col1)-parseInt(col2);
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(subtract);
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th >column two</th>
<th >column three</th>
<th >sum of all columns</th>
<th >subtraction</th>
</tr>
</thead>
<tbody class="jsTableBody">
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
<td class="col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col1">43</td>
<td class="col2">432</td>
<td class="col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick = "calculate()">calculate</button>

data-maintain-selected="true" not working

<table id="table-manage-data-import-conflicts" data-classes="table table-hover table-condensed" data-cache="false" data-pagination="true" data-page-size="50" data-search="true" data-click-to-select="true" data-maintain-selected="true">
<thead>
<tr>
<th data-field="id" data-visible="false"></th>
<th data-field="recommendationPlacements" data-visible="false"></th>
<th data-field="rules" data-visible="false"></th>
<th data-field="isSelected" data-checkbox="true" data-formatter="BusinessPortal.Manage.DataImportConflicts.formatTableCheckBoxColumn"></th>
<th data-field="name" data-switchable="false" data-sortable="true">Name</th>
<th data-field="description" data-switchable="false" data-formatter="BusinessPortal.Manage.DataImportConflicts.formatTableDescriptionColumn" data-events="BusinessPortal.Manage.DataImportConflicts.handleTableDescriptionColumnEvents">Description</th>
</tr>
</thead>
</table>
I'm using bootstrap version 1.9.1. I want to keep the checked items with pagination
data-maintain-selected="true".
But it won't work. Can someone please help out with this?
isn't this related to pagination server/client side?
i don't know if it helps you but, bellow is my code and is working with data-maintain-selected:"true"
<table id="example"
data-toggle="table"
data-search="true"
data-filter-control="true"
data-sort-name="Glider"
data-show-refresh="true"
data-sort-order="asc"
data-show-export="true"
data-click-to-select="true"
data-maintain-selected="true"
data-show-toggle="true"
data-show-columns="true"
data-pagination="true"
data-filter-control="true"
cellspacing="0">
<thead>
<tr>
<th data-field="1" data-field="state" data-checkbox="true"></th>
<th data-field="Glider" data-filter-control="input" data-sortable="true">Glider</th>
<th data-sortable="true" data-align="center" data-valign="middle" data-toggle="tooltip" data-placement="bottom" >A dist<i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="Average distance for all the flights made with the selected glider"></i></th>
<th data-sortable="true">Pilots</th>
</tr>
</thead>
<tbody>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name1</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name2</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name3</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name3</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name4</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name4</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name5</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name5</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name6</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name11221</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name111</td>
<td> 1</b></td>
<td> 2</td>
</tr>
</tbody>
</table>

Custom function to limit selections is not working

I have a html form having 7 songs with checkboxes, Users can only select up to 5 songs. I created a js function to do this. It works nice if I go selecting songs and prevent selecting 6th song and show alert message.
But once I have selected 5 songs and try to deselect any song, it also prevent we to do so and show the same alert.
here is my HTML markup (sorry for the table layout this is my client's choice, he only want table even if I can do the same without the table)
<form id="apc-form" dir="rtl" method="post" action="ap-contact-form.php">
<table id="apc-table">
<tbody>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 1</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></i></td>
<td class="song-name">Song 2</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 3</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 4</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 5</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 6</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 7</td>
</tr>
</tbody>
</table>
</div>
<button id="submit" type="submit">שלח</button>
</form>
and JQuery codes
var apcSongs =
{
init: function() {
var sCheckbox = $('#apc-table .song-select');
var form = $('#apc-form');
form.submit(function(e) {
apcSongs.validateMin();
});
sCheckbox.click(function(e) {
var selectedSongs = $('#apc-table').find('tr.selected');
console.log(selectedSongs.length);
if (selectedSongs.length < 5) {
$(this).parent().parent().toggleClass('selected');
} else {
alert('You can\'t choose more than 5 songs');
return false
}
});
},
validateMin: function() {
var selectedSongs = $('#apc-table').find('tr.selected');
if (selectedSongs.length == 0)
{
alert('You must select at least 1 song');
return false
}
}
}
apcSongs.init();
You can check this jsbin
Please check my code and tell me what can I do with my codes so that it doesn't show alert on deselecting. If you know a batter way to do this please tell me.
When a checkbox is clicked, you need to check if it's checked. If it's checked, that means it's now being unchecked, and therefore you should let the user click.
In your js :
replace
if (selectedSongs.length < 5 ) {
by
if (selectedSongs.length < 5 || ! $(this).is(':checked')) {
You can use something likethis
<html>
<head><title>Login page</title></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input[type=checkbox][name=ck]").click(function() {
if( $("input[type=checkbox][name=ck]:checked").length > 5)
{
alert("You can select only 5");
$(this).prop('checked', false);
}
});
});
</script>
<body>
<table id="apc-table">
<tbody>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 1</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></i></td>
<td class="song-name">Song 2</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 3</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 4</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 5</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 6</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 7</td>
</tr>
</tbody>
</table>
</body>
</html>

Categories