Develop Reference

Get summary number from only visible table rows

I have a code which counts a total summary of all price table cells. This is not exactly what do I need. I need to count the summary from only visible rows. I use filtering by date range, once I change date it displays only dates from the selected date range, but the summary price is from the all rows. I need to implement the part of the code for visible table rows only and update the summary price in the span.
Any advice?
function filterRows() {
var from = jQuery("#datefilterfrom").val();
var to = jQuery("#datefilterto").val();
if (!from && !to) { // no value for from and to
return;
}
from = from || "1970-01-01"; // default from to a old date if it is not set
to = to || "2999-12-31";
var dateFrom = moment(from);
var dateTo = moment(to);
jQuery("#table tr").each(function(i, tr) {
var val = jQuery(tr).find("td:nth-child(2)").text();
var dateVal = moment(val, "DD.MM.YYYY");
var visible = (dateVal.isBetween(dateFrom, dateTo, null, [])) ? "" : "none"; // [] for inclusive
jQuery(tr).css("display", visible);
//summary start
var table = document.getElementById("table"),
sumVal = 0;
for (var i = 1; i < table.rows.length; i++) {
sumVal = sumVal + parseInt(table.rows[i].cells[2].innerHTML);
}
document.getElementById("val").innerHTML = "Sum Value = " + sumVal;
console.log(sumVal);
});
//summary end
}
jQuery("#datefilterfrom").on("change", filterRows);
jQuery("#datefilterto").on("change", filterRows);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<div class="row">
<div class="col-md-3">
<h4>Date from</h4>
<input type="date" class="form-control" id="datefilterfrom" data-date-split-input="true">
<h4>Date to</h4>
<input type="date" class="form-control" id="datefilterto" data-date-split-input="true">
</div>
</div>
<span id="val"></span>
<table id="table" class="sortable">
<tr>
<th>Name</th>
<th>Date</th>
<th>Price</th>
</tr>
<tr>
<td>Name</td>
<td>20.10.2020</td>
<td>20</td>
</tr>
<tr>
<td>Name</td>
<td>21.10.2020</td>
<td>25</td>
</tr>
<tr>
<td>Name</td>
<td>22.10.2020</td>
<td>30</td>
</tr>
</table>
This is how it looks like when I select date range in HTML (so I need to get summary from only this selected tr)
I think there need to be some condition added here
sumVal = sumVal + parseInt(table.rows[i].cells[2].innerHTML);

You don't need two loops. You're already looping through the rows with .each() to make them visible or invisible, you can calculate the total in that same loop. After you determine if the row should be visible, use that variable in an if statement to add to the total.
jQuery has a built-in function .toggle() that will switch the visibility of an element. You can make visible a boolean variable instead of a display style value, then use that as the argument to .toggle(). Then you can use this same value in the if condition.
Make your access to columns less dependent on the table layout by using classes instead of column indexes. Use jQuery(tr).find(".price") to access the price column, for instance.
Use <thead> and <tbody> to distinguish the headings from the table data, then use tbody in the .each() loop to only process data rows.
function filterRows() {
var from = jQuery("#datefilterfrom").val();
var to = jQuery("#datefilterto").val();
if (!from && !to) { // no value for from and to
return;
}
from = from || "1970-01-01"; // default from to a old date if it is not set
to = to || "2999-12-31";
var dateFrom = moment(from);
var dateTo = moment(to);
var sumVal = 0;
jQuery("#table tbody tr").each(function(i, tr) {
var val = jQuery(tr).find(".date").text();
var dateVal = moment(val, "DD.MM.YYYY");
var visible = (dateVal.isBetween(dateFrom, dateTo, null, []));
jQuery(tr).toggle(visible);
if (visible) {
sumVal += parseInt(jQuery(tr).find(".price").text());
}
$("#val").text("Sum Value = " + sumVal);
});
}
jQuery("#datefilterfrom, #datefilterto").on("change", filterRows);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<div class="row">
<div class="col-md-3">
<h4>Date from</h4>
<input type="date" class="form-control" id="datefilterfrom" data-date-split-input="true">
<h4>Date to</h4>
<input type="date" class="form-control" id="datefilterto" data-date-split-input="true">
</div>
</div>
<span id="val"></span>
<table id="table" class="sortable">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Price</th>
</tr>
<thead>
<tbody>
<tr>
<td>Name</td>
<td class="date">20.10.2020</td>
<td class="price">20</td>
</tr>
<tr>
<td>Name</td>
<td class="date">21.10.2020</td>
<td class="price">25</td>
</tr>
<tr>
<td>Name</td>
<td class="date">22.10.2020</td>
<td class="price">30</td>
</tr>
<tbody>
</table>

Bootstrap Table sorting removes dynamic class assigned to a cell

I have a bootstrap table that looks like this -
$('#colorChangeForm').submit(function () {
changeBackground();
return false;
});
function changeBackground() {
var noOfProposals = document.getElementById("countInput").value;
var table = document.getElementById("myTable");
var tableLen = table.rows.length;
for (var i = 1; i < tableLen; i++) {
if (noOfProposals) {
if (table.rows[i].cells[1].innerText > noOfProposals) {
table.rows[i].cells[1].className = 'table-danger';
}
else {
table.rows[i].cells[1].className = 'table-success';
}
}
}
}
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js" integrity="sha256-o8aByMEvaNTcBsw94EfRLbBrJBI+c3mjna/j4LrfyJ8=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
</head>
<form class="form-inline" id="colorChangeForm">
<div class="form-group mb-2">
<label for="countInput">No. of Proposals - </label>
<input type="proposals" class="form-control" id="countInput" placeholder="limit of proposals">
</div>
<button type="submit" class="btn btn-primary mb-2" id="btnChangeColor">Submit</button>
</form>
<table data-toggle="table"
data-classes="table table-hover"
data-striped="true"
data-sort-order="asc"
style="width: auto;" id="myTable" class="table">
<thead class="thead-dark">
<tr style="background-color:lightgray">
<th data-sortable="true">Name</th>
<th data-sortable="true">Total Proposals</th>
</tr>
</thead>
<tr>
<td>A</td>
<td>123</td>
</tr>
<tr>
<td>B</td>
<td>150</td>
</tr>
<tr>
<td>C</td>
<td>170</td>
</tr>
</table>
I'm changing the class for "Total proposals" based on the value.
This value, I'm getting from a form on the same page.
I'm executing a javascript where I'm changing the color of the cell
This changes the color of the cell correctly.
However, When I sort the table (not refresh the page), it somehow removes the dynamic cell class.
Any Idea how to keep my cell class while sorting the table?

The sorting event is handled by the bootstrap-table extension you are using in your code.
It's not part of bootstrap itself and it's sorting system works by recreating table rows in the selected order.
That means that you are assigning a class to an element that will be deleted.
To solve the problem you can:
Use a different sorting system that dosn't delete column rows
Execute the changeBackground function again after the sortying is ended

getting error after executing the code TypeError: display is nullscript.js:22:22

HTML
This a HTML page I made to add row in the tables one by one below one another when user clicks on 'add' button and gives me error as below.
<div id="adder">
<table id="adderhd">
<tr>
<th>PARTICULARS</th>
<th>Amount</th>
</tr>
<tr>
<th><input type="text" id="particulars" value=""></th>
<th><input type="number" id="amount" value=""><button id="add">Add</button></th>
</tr>
</table>
</div>
<div id="tables">
<div>
<table class="table-1">
<tr>
<th>
PARTICULARS
</th>
<th>
AMOUNT
</th>
</tr>
</table>
</div>
</div>
JavaScript
This is a JavaScript code I wrote for it but after executing this I got error on console.
Please help me I am a beginner in JavaScript.
function rowAdder() {
var particulars = document.getElementById("particulars").value;
var amount = document.getElementById("amount").value;
if (!particulars || !amount) {
alert("Please enter the values inside all the field.");
return;
}
var display = document.getElementById("table-1");
var newRow = display.insertRow(row); //not working (insert(row));
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
cel1.innerHTML = particulars;
cel2.innerHTML = amount;
row++;
}

You need to add an event onclick on the button to call rowAdder function. Variable 'display' is getting element by id, so assign id="table-1" to your html element . Its working fine.
function rowAdder() {
var particulars = document.getElementById("particulars").value;
var amount = document.getElementById("amount").value;
if (!particulars || !amount) {
alert("Please enter the values inside all the field.");
return;
}
var display = document.getElementById("table-1");
var newRow = display.insertRow();
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
cel1.innerHTML = particulars;
cel2.innerHTML = amount;
}
<div id="adder">
<table id="adderhd">
<tr>
<th>PARTICULARS</th>
<th>Amount</th>
</tr>
<tr>
<th><input type="text" id="particulars" value=""></th>
<th><input type="number" id="amount" value="">
<button onclick="rowAdder()"id="add">Add</button></th>
</tr>
</table>
</div>
<div id="tables">
<div>
<table id="table-1">
<tr>
<th>
PARTICULARS
</th>
<th>
AMOUNT
</th>
</tr>
</table>
</div>
</div>

How to insert <tr>'s at certain position in html table?

I have designed a table with headers. I am appending dynamic rows <tr> to this table. While appending I am losing the order of the rows. Any suggestion or ideas as to how can I solve this problem? Thanks in advance.
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
-- dynamic rows will come.
</table>
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable').append(html1);
$('#myTable').append(html2);
$('#myTable').append(html3);
Desired Output :
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tr id="1">
<td>aaa</td>
<td>aaa</td>
</tr>
<tr id="2">
<td>ccc</td>
<td>ccc</td>
</tr>
<tr id="3">
<td>bbb</td>
<td>bbb</td>
</tr>
</table>

This you will do. Add a sorting function and then call that function as described in below link.
Added snippet based on Jquery content sorting link:- https://www.shift8web.ca/2017/01/use-jquery-sort-reorganize-content/
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable').append(html1);
$('#myTable').append(html2);
$('#myTable').append(html3);
var i;
var htmlcontent = $('#myTable').html();
$('#myTableOriginalContent ').html( $('#myTable').html())
sortMeBy('id', 'myTable', 'tr', 'asc')
function sortMeBy(arg, sel, elem, order) {
var $selector = $('#'+sel),
$element = $selector.children(elem);
$element.sort(function(a, b) {
var an = parseInt(a.getAttribute(arg)),
bn = parseInt(b.getAttribute(arg));
if (order == "asc") {
if (an > bn)
return 1;
if (an < bn)
return -1;
} else if (order == "desc") {
if (an < bn)
return 1;
if (an > bn)
return -1;
}
return 0;
});
$element.detach().appendTo($selector);
}
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Original Content
<table id="myTableOriginalContent">
<thead>
<tr><td></td></tr>
<tr>
<th><span>Name</span></th>
<th><span>Description</span></th>
</tr>
</thead>
</table>
Desired Result
<table id="myTable">
<thead>
<tr><td></td></tr>
<tr>
<th><span>Name</span></th>
<th><span>Description</span></th>
</tr>
</thead>
</table>
</body>
</html>

Change $('#myTable').append(html3); to $(html3).insertAfter('#1'). Also note that you'll need a tbody element after the thead to contain your rows, but I would imagine the browser will be inserting one for you automatically. Try this:
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>';
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>';
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>';
$('#myTable tbody').append(html1).append(html2);
$(html3).insertAfter('#1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<td></td>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody></tbody>
</table>

The logic is you append all dynamic table rows then reorder them based on the attribute of the id.
Sorting code source: Using jquery, how do you reorder rows in a table based on a TR attribute?
I just modified it a little.
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
var html4 = '<tr id="5"><td>5th</td><td>5th</td></tr>'; // This should go to 5th position.
var html5 = '<tr id="4"><td>4th</td><td>4th</td></tr>'; // This should go to 4th position.
$('#myTable tbody').append(html1);
$('#myTable tbody').append(html2);
$('#myTable tbody').append(html3);
$('#myTable tbody').append(html4);
$('#myTable tbody').append(html5);
var $table=$('#myTable');
var rows = $table.find('tr').get();
rows.sort(function(a, b) {
var keyA = $(a).attr('id');
var keyB = $(b).attr('id');
if (keyA > keyB) return 1;
if (keyA < keyB) return -1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Simple just you are calling wrong way call this way
$('#myTable').append(html1);
$('#myTable').append(html3);
$('#myTable').append(html2);
Complete Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
</table>
</body>
</html>
<script type="text/javascript">
$( document ).ready(function() {
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>';
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>';
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>';
$('#myTable thead').after(html1,html3,html2);
});
</script>

Try Following
Add <tbody> in table & append rows
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable tbody').append(html1);
$('#myTable tbody').append(html2);
$('#myTable tbody').append(html3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Place parallel table columns that are inside separate div's aligned

I have two div's, one above the other and both have a table inside them with the same amount of columns. I want the columns to be the same width size in both and aligned. If a columns in on div expands, i want the column parallel in the other div to expand to the same with.
NB: The Columns have no width.
Link to the HTML code below:
HTML:
<div id="A">
<table>
<tbody>
<tr>
<th></th>
<th>Blah! Blah</th>
<th>adsdsdadasdasdasdasd</th>
</tr>
</tbody>
</table>
</div>
<br/>
<div id="B">
<table>
<tr>
<th>left head</th>
<td class="col1"></td>
<td class="col2">Hello World!</td>
</tr>
<tr>
<th>left head</th>
<td class="col1">Hello World!</td>
<td class="col2">dsfsdfgdsgdsgdsfgdsgdsgfdfgdf</td>
</tr>
</table>
</div>
JQuery:
$(document).ready(function() {
$('#updatetopdiv').click(function(){
//Properly align parallel div's top to bottom
var tbl1 = $("#A table tr td");
var tbl2 = $("#B table tr td");
tbl1.each(function(i) {
if (tbl2.eq(i).width() < $(this).width()) {
tbl2.eq(i).width($(this).width());
} else {
$(this).width(tbl2.eq(i).width());
}
});
});
});​
​

​$(document).ready(function(){
var tbl1 = $("#A table tr td");
var tbl2 = $("#B table tr td");
tbl1.each(function(i){
if (tbl2.eq(i).width() < $(this).width()){
tbl2.eq(i).width($(this).width());
} else {
$(this).width(tbl2.eq(i).width());
}
});
});​
This works, though it doesn't run until load.
Also placed here: http://jsfiddle.net/gwUFb/3/
EDIT:
I know you said you already got it working, but here's my original code, edited for your use case:
$(document).ready(function(){
var tbl1 = $("#A table tr th");
var tbl2 = $("#B table tr td,#B table tr th");
tbl1.each(function(i){
if (tbl2.eq(i).width() < $(this).width()){
tbl2.eq(i).width($(this).width());
} else {
$(this).width(tbl2.eq(i).width());
}
});
});​

html will be:
<div id="A">
<table class="fixed-table">
<tr>
<td class="column-a">Hello World!</td>
<td class="column-b"></td>
</tr>
</table>
</div>
<br/>
<div id="B">
<table class="fixed-table">
<tr>
<td class="column-a"></td>
<td class="column-b">Hello World!</td>
</tr>
</table>
</div>
css will be
.fixed-table {
table-layout: fixed;
}
.column-a {
width: 50%;
}
.column-b {
width: 50%;
}
this is a fixed solution, not dynaimic, if any div scroll appears, alignment break. for this you have to use javascript.