could someone help me with this block of code please.
I have a table that usually comes with more than 5 rows.
I want to show only 5 when loading the page, and when clicking on "SHOW MORE" show the rest, when clicking on "SHOW LESS" show only 5.
SHOW MORE and SHOW LESS must be the same button
Can someone help me. I started using Jquery, but I wanted to use pure JS
$("[id*='trid'] > tr").each(function(index) {
if (index >= 5) {
$(this).hide();
}
});
function mostrarRegistros() {
$("[id*='trid'] > tr").each(function(index) {
$(this).show();
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tbody id="trid">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<br />
<br />
<br />
<button type="button" onclick="mostrarRegistros()">Show More/ Show Less</button>
Here is a solution using vanilla js, its one way to do it but could do it differently like attach the button dynamically which would simplify it abit.
If you have multiple tables use a class to define that the table should have reveal functionality, then grab all tables and pass in the element to a function which provides the functionality, then return the set of methods which can call on the buttons, using an id as an identifier.
const tableReveal = function(elm, options) {
// merge options
options = Object.assign({}, {
limit: 3
}, options)
// the tr's
let trs = elm.querySelectorAll('tbody tr')
// shown state
let shown
// funcs
const hide = () => {
trs.forEach((tr, index) => index >= options.limit ? tr.style.display = 'none' : '')
shown = false
}
const show = () => {
trs.forEach((tr) => tr.style.display = 'table-row')
shown = true
}
// initial state
hide()
// reveal funcs
return {
toggle: () => shown ? hide() : show(),
hide,
show
}
}
/**
* Usage:
* - For each over every table-reveal class, init reveal func and pass in element + options, return and assign table[id] for button
*/
let table = {}
document.querySelectorAll('.table-reveal').forEach(el => table[el.getAttribute('id')] = tableReveal(el, {
limit: 5
}))
<table style="width:100%" class="table-reveal" id="table-reveal-1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<button type="button" onclick="table['table-reveal-1'].toggle()">Show More / Show Less</button>
<table style="width:100%" class="table-reveal" id="table-reveal-2">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<button type="button" onclick="table['table-reveal-2'].toggle()">Show More / Show Less</button>
And this is a solution from me on jquery, using the pseudo-classes :visble, which determines the visible tags of the tr, as well as the lt() selector to determine the minimum value of the rows in the table.
Also in my example, the button changes the text depending on the need to hide or show the text:
$('button').text('Show More');
and
$('button').text('Show Less');
$('#trid tr').hide();
$('#trid tr:lt(5)').show();
$('button').text('Show More');
function mostrarRegistros() {
if ($('#trid tr:visible').length <= 5) {
$('#trid tr').show();
$('button').text('Show Less');
} else {
$('#trid tr').hide();
$('#trid tr:lt(5)').show();
$('button').text('Show More');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tbody id="trid">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<br />
<br />
<br />
<button type="button" onclick="mostrarRegistros()"></button>
Related
I am trying to learn jQuery and JS. I want to filter the table to be the values in my arrays. The month will always be one month but the Name may have more that one name.
The results I want is:
Office
Name
Month
Quantity
1a
Abe D
Feb
13
1a
Jon R
Feb
12
$(document).ready(function(){
var names = ["Abe D", "Jon R"];
var mth = "Feb"
$("button").click(function(){
$("td:nth-child(2)").each(function(){
let tr = $(this);
let mths = tr.find('td:nth-child(3)').text();
console.log(mth + ' : ' + mths)
if(names.indexOf($(this).text()) == -1 || mths !== mth){
$(this).parent().hide();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Office</th>
<th>Name</th>
<th>Month</th>
<th>Quantity</th>
</tr>
</thead>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Jan</td>
<td>10</td>
</tr>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Feb</td>
<td>13</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Jan</td>
<td>9</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Feb</td>
<td>12</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Jan</td>
<td>13</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Feb</td>
<td>14</td>
</tr>
</table>
<button>Filter</button>
How do I get the filter working?
You already appear to have the logic to retrieve the name and month from each row of the table. Therefore to reach your goal all you need to do is use the includes() method on the array to determine if the current name exists within it, and a straight string comparison of the month names.
I would suggest doing this comparison on the tr, not the child td, as it makes the logic to hide()/show() them much more straightforward:
jQuery($ => {
const names = ["Abe D", "Jon R"];
const mth = "Feb"
$("button").click(function() {
$('tbody tr').hide().filter((i, tr) => {
const $tr = $(tr);
const name = $tr.children('td:nth-child(2)').text().trim();
const month = $tr.children('td:nth-child(3)').text().trim();
return names.includes(name) && month === mth;
}).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Office</th>
<th>Name</th>
<th>Month</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Jan</td>
<td>10</td>
</tr>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Feb</td>
<td>13</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Jan</td>
<td>9</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Feb</td>
<td>12</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Jan</td>
<td>13</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Feb</td>
<td>14</td>
</tr>
</tbody>
</table>
<button>Filter</button>
The .each() loop should loop over rows.
Then use .find() to get the name and month fields from the row. Test them and hide the row if they don't match.
$(document).ready(function() {
var names = ["Abe D", "Jon R"];
var mth = "Feb";
$("button").click(function() {
$("tbody tr").show(); // show everything before filtering
$("tbody tr").each(function() {
let tr = $(this);
let mths = tr.find('td:nth-child(3)').text();
let name = tr.find('td:nth-child(2)').text();
if(!names.includes(name) || mths !== mth) {
$(this).hide();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Office</th>
<th>Name</th>
<th>Month</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Jan</td>
<td>10</td>
</tr>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Feb</td>
<td>13</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Jan</td>
<td>9</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Feb</td>
<td>12</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Jan</td>
<td>13</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Feb</td>
<td>14</td>
</tr>
</tbody>
</table>
<button>Filter</button>
Can I have a separate js file which performs action on html control events like
I have three tables on a webpage whenever I put over mouse on any table a alert should show.
I want the code in a separate js file and I cannot use id or class as selector
the selector should be the html control only like table.onmouseOver
I have tried using the
table.onmouseover = handler;
function handler(event){
alert("mouseOver done");
return false;
}
but it is not working
<body>
<table border="1">
<tr id="red">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</br>
</br>
<table border="1">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
</body>
As listed above I want to fire event whenever a mouse comes over any of the one table without id or class selector
Try the below Code Snippet
function handler(event){
alert("mouseOver done");
return false;
}
document.addEventListener("DOMContentLoaded", function() {
var oTables = document.getElementsByTagName("table");
for(var i=0;i<oTables.length;i++)
{
oTables[i].addEventListener("mouseover",handler);
}
});
<html>
<body>
<table border="1">
<tr id="red">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br/>
<table border="1">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
</body>
</html>
I am loading an html file into a content div based on a click from a menu bar. The HTML contains 5 tables but for some reason the div only shows the first 5 lines of the first table, then you need a scroll bar to view the rest of the tables. I want to see all the tables on a single view and only have the scroll bars if the information exceeds the screen. Any suggestions would help. I have tried to set the width and height to 100% on the div but that did not work. When I view the table HTML alone it looks the way I want it to.
Thanks for any and all help.
function load_codes() {
document.getElementById("content").innerHTML = '<object type="text/html" data="codes2.html" ></object>';
}
function load_mrgsql() {
document.getElementById("content").innerHTML = '<object type="text/html" data="mergesqlcode.html" ></object>';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<h2>Sidebar</h2>
<p>Open Merge Analysis WorkBook</p>
<p>
Open Merge Analysis SQL file
</p>
<p>
Common Merge Code List
</p>
<p>Merge Analysis Statistics</p>
<p>My Statistics</p>
</div>
<div id="content" style="height: auto; width:auto; min-height:100%; display: block; overflow: auto;">
<h1>Merge Analysis Tracking</h1>
<p>Welcome to the Merge Analysis Tracking Tool</p>
<p>Look around</p>
</div>
<!-- HTML with Tables (only 2 shown) -->
<body>
<table class="table">
<thead>
<tr>
<th colspan="3">Case Close Codes</th>
</tr>
</thead>
<tr>
<td>BFU</td>
<td>BIOLOGICAL FATHER UNKNOWN</td>
</tr>
<tr>
<td>DGC</td>
<td>IV-D GOOD CAUSE</td>
</tr>
<tr>
<td>DNO</td>
<td>NCP DECEASED</td>
</tr>
<tr>
<td>ERR</td>
<td>CASE ENTERED IN ERROR</td>
</tr>
<tr>
<td>FOR</td>
<td>FOREIGN</td>
</tr>
<tr>
<td>INC</td>
<td>INCARCERATED, INSTITUTIONALIZED, MEDICAL</td>
</tr>
<tr>
<td>JNC</td>
<td>INITIATING JURISDICTION NON COOPERATION</td>
</tr>
<tr>
<td>LCO</td>
<td>LOCATE ONLY</td>
</tr>
<tr>
<td>LOC</td>
<td>LOSS OF CONTACT</td>
</tr>
<tr>
<td>NCA</td>
<td>NO CURRENT ORDER/ARREARS
<$500</td>
</tr>
<tr>
<td>NCO</td>
<td>NON-COOPERATION</td>
</tr>
<tr>
<td>P21</td>
<td>PATERNITY 21</td>
</tr>
<tr>
<td>PBI</td>
<td>PATERNITY BEST INTEREST</td>
</tr>
<tr>
<td>PEX</td>
<td>PATERNITY EXCLUDED</td>
</tr>
<tr>
<td>QLO</td>
<td>QUICK LOCATE ONLY</td>
</tr>
<tr>
<td>RSC</td>
<td>RECIPIENT OF SERVICES REQUEST CLOSURE</td>
</tr>
<tr>
<td>UL1</td>
<td>UNABLE TO LOCATE 1 YEAR</td>
</tr>
<tr>
<td>UL3</td>
<td>UNABLE TO LOCATE 3 YEARS</td>
</tr>
</table>
<table class="-table">
<thead>
<tr>
<th colspan="4">Relationship Codes</th>
</tr>
</thead>
<tr>
<td>01</td>
<td>SELF</td>
</tr>
<tr>
<td>02</td>
<td>SPOUSE</td>
</tr>
<tr>
<td>05</td>
<td>CHILD</td>
</tr>
<tr>
<td>06</td>
<td>GRANDCHILD</td>
</tr>
<tr>
<td>07</td>
<td>NEPHEW OR NIECE</td>
</tr>
<tr>
<td>08</td>
<td>SIBLING</td>
</tr>
<tr>
<td>09</td>
<td>FIRST OR SECOND COUSIN</td>
</tr>
<tr>
<td>10</td>
<td>OTHER RELATIVE</td>
</tr>
<tr>
<td>13</td>
<td>UNBORN</td>
</tr>
<tr>
<td>15</td>
<td>STEP CHILD</td>
</tr>
<tr>
<td>16</td>
<td>STEP GRANDCHILD</td>
</tr>
<tr>
<td>17</td>
<td>STEP NEPHEW OR NIECE</td>
</tr>
<tr>
<td>18</td>
<td>STEP BROTHER OR SISTER</td>
</tr>
<tr>
<td>19</td>
<td>OTHER SPECIFIED RELATIVE</td>
</tr>
<tr>
<td>20</td>
<td>ATTORNEY</td>
</tr>
<tr>
<td>27</td>
<td>OTHER</td>
</tr>
<tr>
<td>28</td>
<td>FATHER</td>
</tr>
<tr>
<td>29</td>
<td>ALLEGED FATHER</td>
</tr>
<tr>
<td>30</td>
<td>STEP FATHER</td>
</tr>
<tr>
<td>31</td>
<td>GRAND FATHER</td>
</tr>
<tr>
<td>32</td>
<td>MOTHER</td>
</tr>
<tr>
<td>33</td>
<td>STEP MOTHER</td>
</tr>
<tr>
<td>34</td>
<td>GRAND MOTHER</td>
</tr>
<tr>
<td>35</td>
<td>SISTER</td>
</tr>
<tr>
<td>35</td>
<td>SISTER</td>
</tr>
<tr>
<td>36</td>
<td>AGENCY</td>
</tr>
<tr>
<td>36</td>
<td>AGENCY</td>
</tr>
<tr>
<td>37</td>
<td>AUNT</td>
</tr>
<tr>
<td>37</td>
<td>AUNT</td>
</tr>
<tr>
<td>38</td>
<td>UNCLE</td>
</tr>
<tr>
<td>38</td>
<td>UNCLE</td>
</tr>
<tr>
<td>39</td>
<td>BROTHER</td>
</tr>
<tr>
<td>39</td>
<td>BROTHER</td>
</tr>
<tr>
<td>40</td>
<td>ADOPTED CHILD</td>
</tr>
<tr>
<td>40</td>
<td>ADOPTED CHILD</td>
</tr>
<tr>
<td>99</td>
<td>UNKNOWN</td>
</tr>
<tr>
<td>99</td>
<td>UNKNOWN</td>
</tr>
</table>
If I understand your question correctly, you want to make the object have it's full height and not display scrollbars, instead of the other way around.
If so, you should be able to do something like this:
function load_codes() {
let elem = document.getElementById("content")
elem.innerHTML = '<object type="text/html" data="codes2.html" ></object>';
elem.onload = function(e) {
elem.style.height = e.contentWindow.document.body.offsetHeight;
}
}
That should get what you need. You may need to do additional css to remove the object's borders.
Basically when a user clicks on a specific link that I have set-up within an SVG graph view on a page, using a click event that calls window.location.href I would like it to branch to a report (html table via anchor tag) that is below the graph and highlight the rows red, matching the rule id, say where rule id equals 90, passed as part of the href link.
I would like to see in my example below, rows 1 and 4 highlighted red to notify the user which rules are affected.
I would also like a means of first resetting the table highlights, just in case they exists from a previous click based on a different rule id href click.
I realise that I will need to use a jQuery .each() function, but just not sure how to check for Rule = 90 and highlight that entire row.
HTML table may look like the following:
<table class="rule-table" style="width:100%">
<tbody>
<tr>
<th>Number</th>
<th>Rule</th>
<th>First Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td class="the-rule">90</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td class="the-rule">87</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td class="the-rule">22</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>4</td>
<td class="the-rule">90</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</tbody>
</table>
Use :contains() jQuery selector to filter elements and .css() to set the values. .closest('tr') will get the parent row.
var hrefValue = 90;
$('td.the-rule:contains('+hrefValue+')').closest('tr').css('background-color', 'red');
*Note : :contains() finds match in the whole text node.
$(document).ready(function(){
var hrefValue = 90;
$('td.the-rule:contains('+hrefValue+')').closest('tr').css('background-color', 'red');
})
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="rule-table" style="width:100%">
<tbody>
<tr>
<th>Number</th>
<th>Rule</th>
<th>First Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td class="the-rule">90</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td class="the-rule">87</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td class="the-rule">22</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>4</td>
<td class="the-rule">90</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</tbody>
</table>
You could use .filter and return elements containing roleId.
var ruleId = 90;
$ruleTd = $('.the-rule');
$('.rule-table tr').css('background-color', 'white');
$ruleTd.filter(function(td){
return parseInt($(this).text()) === ruleId;
}).parent().css('background-color', 'red');
$(document).ready(function(){
var ruleId = 90;
$ruleTd = $('.the-rule');
$('.rule-table tr').css('background-color', 'white');
$ruleTd.filter(function(){
return parseInt($(this).text()) === ruleId;
}).parent().css('background-color', 'red');
})
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="rule-table" style="width:100%">
<tbody>
<tr>
<th>Number</th>
<th>Rule</th>
<th>First Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td class="the-rule">90</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td class="the-rule">87</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td class="the-rule">22</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>4</td>
<td class="the-rule">90</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</tbody>
</table>
I have a loop where i want display tables and calculate the sum here is html
#for (int i = 0; i < 3; i++) {
<table id="table #i" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
}
In javascript i wrote this code, I want the method can sum up all data in column 2 and 3 then display on the footer of each table in a loop, but when i run this code, it returned wrong sum and only display in 1st table.
$(document).ready(function () {
$('table').each(function () {
calculateColumn(1);
calculateColumn(2);
})
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function () {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text(total);
}
When you say $('table tr').each(), it iterates over all the tr elements in the page, not just the one's in the current table(which is targeted by $('table').each())
You need to pass the table reference to the calculate method
$(document).ready(function() {
$('table').each(function() {
calculateColumn(this, 1);
calculateColumn(this, 2);
})
});
function calculateColumn(table, index) {
var total = 0;
$(table).find('tbody td:nth-child(' + (index + 1) + ')').each(function() {
total += +$(this).text() || 0;
});
$(table).find('tfoot td').eq(index).text(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>6</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>6</td>
<td>150</td>
</tr>
<tr>
<td>Banana</td>
<td>3</td>
<td>75</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>5</td>
<td>120</td>
</tr>
<tr>
<td>Organe</td>
<td>4</td>
<td>100</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>10</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>5</td>
<td>300</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>