Trigger keydown event on mousescroll - javascript

On div, with overflow-y: scroll, how can I scroll down with keypress down (no jQuery).
<div class="data">
...
number of data
</div>
<style>
.data {
background-color: blue;
text-align: center;
overflow-y: scroll;
margin-left: 700px;
margin-top: 50px;
height: 400px;
width: 150px;
}
</style>
https://codepen.io/SahilKatia/pen/GYVzxR
Link to the Angular Project.


If you add the attribute tabindex="0" to your .data div, that will make it "focusable" and let you scroll up and down with the keyboard when it is focused.
I'm assuming you only want the keyboard arrows to scroll your div when it's in focus, otherwise you'd have to override the existing full window scroll functionality like this:
const dataDiv = document.querySelector('body > div.data')
window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') {
e.preventDefault();
dataDiv.scrollTo(0, dataDiv.scrollTop - 10)
} else if (e.key === 'ArrowDown') {
e.preventDefault();
dataDiv.scrollTo(0, dataDiv.scrollTop + 10)
}
})


Hopefully this is the functionality you are looking for. Building on the note from #Graham you can javascript to set focus on the .data div on page load, allowing the user to scroll the table using key up/down without an initial click.
window.onload = function() {
document.getElementById("auto-focus").focus();
};
.data {
margin-top:50px;
margin-left:700px;
text-align:center;
overflow-y:scroll;
height:400px;
background-color:blue;
width:150px;
}
<div class="data" tabindex="0" id="auto-focus">
<table cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>Octavius</td>
</tr>
<tr>
<td>Amal</td>
</tr>
<tr>
<td>Hayes</td>
</tr>
<tr>
<td>Arsenio</td>
</tr>
<tr>
<td>Jackson</td>
</tr>
<tr>
<td>Chadwick</td>
</tr>
<tr>
<td>Hall</td>
</tr>
<tr>
<td>Chaim</td>
</tr>
<tr>
<td>Kennedy</td>
</tr>
<tr>
<td>Oliver</td>
</tr>
<tr>
<td>Vincent</td>
</tr>
<tr>
<td>Giacomo</td>
</tr>
<tr>
<td>Sebastian</td>
</tr>
<tr>
<td>Oren</td>
</tr>
<tr>
<td>Perry</td>
</tr>
<tr>
<td>Jesse</td>
</tr>
<tr>
<td>Laith</td>
</tr>
<tr>
<td>Kirk</td>
</tr>
<tr>
<td>Christopher</td>
</tr>
<tr>
<td>Oren</td>
</tr>
<tr>
<td>Donovan</td>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Chandler</td>
</tr>
<tr>
<td>Rajah</td>
</tr>
<tr>
<td>Lyle</td>
</tr>
<tr>
<td>Rogan</td>
</tr>
<tr>
<td>Colt</td>
</tr>
<tr>
<td>Rooney</td>
</tr>
<tr>
<td>Cruz</td>
</tr>
<tr>
<td>Connor</td>
</tr>
<tr>
<td>Walter</td>
</tr>
<tr>
<td>Roth</td>
</tr>
<tr>
<td>Adam</td>
</tr>
<tr>
<td>Roth</td>
</tr>
<tr>
<td>Kibo</td>
</tr>
<tr>
<td>Sebastian</td>
</tr>
<tr>
<td>Lawrence</td>
</tr>
<tr>
<td>Valentine</td>
</tr>
<tr>
<td>Dorian</td>
</tr>
<tr>
<td>Yuli</td>
</tr>
<tr>
<td>Matthew</td>
</tr>
<tr>
<td>Wang</td>
</tr>
<tr>
<td>Elton</td>
</tr>
<tr>
<td>Chadwick</td>
</tr>
<tr>
<td>Kibo</td>
</tr>
<tr>
<td>Reuben</td>
</tr>
<tr>
<td>Rashad</td>
</tr>
<tr>
<td>Kibo</td>
</tr>
<tr>
<td>Orlando</td>
</tr>
<tr>
<td>Amir</td>
</tr>
<tr>
<td>William</td>
</tr>
<tr>
<td>Lester</td>
</tr>
<tr>
<td>Timon</td>
</tr>
<tr>
<td>William</td>
</tr>
<tr>
<td>Dale</td>
</tr>
<tr>
<td>Timothy</td>
</tr>
<tr>
<td>Lyle</td>
</tr>
<tr>
<td>Erasmus</td>
</tr>
<tr>
<td>Amos</td>
</tr>
<tr>
<td>Gary</td>
</tr>
<tr>
<td>Dexter</td>
</tr>
<tr>
<td>Malcolm</td>
</tr>
<tr>
<td>Hyatt</td>
</tr>
<tr>
<td>Sawyer</td>
</tr>
<tr>
<td>Elton</td>
</tr>
<tr>
<td>Kennan</td>
</tr>
<tr>
<td>Alec</td>
</tr>
<tr>
<td>Prescott</td>
</tr>
<tr>
<td>Omar</td>
</tr>
<tr>
<td>Jason</td>
</tr>
<tr>
<td>Ignatius</td>
</tr>
<tr>
<td>Isaac</td>
</tr>
<tr>
<td>Aidan</td>
</tr>
<tr>
<td>Gabriel</td>
</tr>
<tr>
<td>Brody</td>
</tr>
<tr>
<td>Emerson</td>
</tr>
<tr>
<td>Burton</td>
</tr>
<tr>
<td>Axel</td>
</tr>
<tr>
<td>Clinton</td>
</tr>
<tr>
<td>Abdul</td>
</tr>
<tr>
<td>Philip</td>
</tr>
<tr>
<td>Harding</td>
</tr>
<tr>
<td>Lee</td>
</tr>
<tr>
<td>Denton</td>
</tr>
<tr>
<td>Kevin</td>
</tr>
<tr>
<td>Rashad</td>
</tr>
<tr>
<td>Davis</td>
</tr>
<tr>
<td>Hasad</td>
</tr>
<tr>
<td>Nehru</td>
</tr>
<tr>
<td>Galvin</td>
</tr>
<tr>
<td>Isaiah</td>
</tr>
<tr>
<td>Fritz</td>
</tr>
<tr>
<td>Wallace</td>
</tr>
<tr>
<td>Barclay</td>
</tr>
<tr>
<td>Harding</td>
</tr>
<tr>
<td>Dieter</td>
</tr>
<tr>
<td>Emmanuel</td>
</tr>
<tr>
<td>Burke</td>
</tr>
<tr>
<td>Caesar</td>
</tr>
<tr>
<td>Randall</td>
</tr>
</tbody>
</table>
</div>

Related

set div full height and width in click from another div

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.

jQuery add class to last tbody in a loop after each thead

In html I have my markup is like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
I want to add a class for each last tbody after thead. So basically my output should be like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
</table>
I have tried this code but its not working at all.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextAll('tbody').last().addClass('last-row');
});

You can add that class to all tbody before thead and then add same class to last tbody
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
Demo
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
.last-row
{
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>12</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>rftg</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>g</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>

jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody:last-child').addClass('last-row');
.section-table tbody{
background-color:#F00;
}
.section-table tbody.last-row{
background-color:#FF0;
}
.section-table td{
height:30px;
width:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Try prev('tbody'), since you don't have thead at the end, you need to add tbody:last-child as well.

You can first add the class to all the <tbody> that is just a previous element of the <thead>. Using this will leave you with the last <tbody> unchanged in the HTML table so you should add one more line of JQuery that will add class to this remaining last <tbody>.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody').last().addClass('last-row');
.last-row{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>0</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>5</td>
</tr>
</tbody>
<tbody>
<tr>
<td>6</td>
</tr>
</tbody>
<tbody>
<tr>
<td>7</td>
</tr>
</tbody>
<thead>
<tr>
<th>8</th>
</tr>
</thead>
<tbody>
<tr>
<td>9</td>
</tr>
</tbody>
<tbody>
<tr>
<td>10</td>
</tr>
</tbody>
<thead>
<tr>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
</table>

You can use .nextUntil() to target all siblings till <THEAD> is encountered then use .last() to get the desired element and add class.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
.last-row {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>HEAD 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>

Want to Improve code functionality for Pagination in Jquery

I have made table which has sorting option also it has pagination. But the problem it has only Next, Last, Previous and First. I want it also should have page number displaying on which page it is and the total number of pages.
I tried getting the button of page number by adding it but the problem is that on clicking them it won't go the page. Actually I copied the pagination from somewhere so I am not able to do it properly.
The working code is here
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="http://tablesorter.com/docs/js/chili/chili-1.8b.js"></script>
<script type="text/javascript" src="http://tablesorter.com/docs/js/docs.js"></script>
<script type="text/javascript" src="http://flaviusmatis.github.io/simplePagination.js/jquery.simplePagination.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $(".tablesorter")});
});
</script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="myTable" class="" style="width:50%">
<thead>
<tr>
<th><span>ID</span></th>
<th><span>Name</span></th>
<tr>
<tbody>
<td>1</td>
<td>Jill</td>
</tr>
<tr>
<td>2</td>
<td>Bill</td>
</tr>
<tr>
<td>3</td>
<td>Chill</td>
</tr>
<tr>
<td>4</td>
<td>Adam</td>
</tr>
<tr>
<td>5</td>
<td>Andrea</td>
</tr>
<tr>
<td>6</td>
<td>Stephen</td>
</tr>
<tr>
<td>7</td>
<td>Rose</td>
</tr>
<tr>
<td>8</td>
<td>Chuck</td>
</tr>
<tr>
<td>9</td>
<td>Barney</td>
</tr>
<tr>
<td>10</td>
<td>Alan</td>
</tr>
<tr>
<td>11</td>
<td>Ted</td>
</tr>
<tr>
<td>12</td>
<td >Simon</td>
</tr>
<tr>
<td>13</td>
<td >Simon</td>
</tr>
<tr>
<td>14</td>
<td >Larry</td>
</tr>
<tr>
<td>15</td>
<td >Harry</td>
</tr>
<tr>
<td>16</td>
<td >Ron</td>
</tr>
<tr>
<td>17</td>
<td>George</td>
</tr>
<td >18</td>
<td>John</td>
</tr>
<tr>
<td>19</td>
<td>Jay</td>
</tr>
<tr>
<td>20</td>
<td>Laura</td>
</tr>
<tr>
<td>21</td>
<td>Michael</td>
</tr>
<tr>
<td>22</td>
<td>George</td>
</tr>
<td >23</td>
<td>John</td>
</tr>
<tr>
<td>24</td>
<td>Jay</td>
</tr>
<tr>
<td>25</td>
<td>Laura</td>
</tr>
<tr>
<td>26</td>
<td>Michael</td>
</tr>
<tr>
<td>27</td>
<td>George</td>
</tr>
<td >28</td>
<td>John</td>
</tr>
<tr>
<td>29</td>
<td>Jay</td>
</tr>
<tr>
<td>30</td>
<td>Laura</td>
</tr>
<tr>
<td>31</td>
<td>Michael</td>
</tr>
<tr>
<td>32</td>
<td>George</td>
</tr>
<td >33</td>
<td>John</td>
</tr>
<tr>
<td>34</td>
<td>Jay</td>
</tr>
<tr>
<td>35</td>
<td>Laura</td>
</tr>
<tr>
<td>36</td>
<td>Michael</td>
</tr>
<tr>
<td>37</td>
<td>George</td>
</tr>
<td >38</td>
<td>John</td>
</tr>
<tr>
<td>39</td>
<td>Jay</td>
</tr>
<tr>
<td>40</td>
<td>Laura</td>
</tr>
<tr>
<td>41</td>
<td>Michael</td>
</tr>
<tr>
<td>42</td>
<td>George</td>
</tr>
<td >43</td>
<td>John</td>
</tr>
<tr>
<td>44</td>
<td>Jay</td>
</tr>
<tr>
<td>45</td>
<td>Laura</td>
</tr>
<tr>
<td>46</td>
<td>Michael</td>
</tr>
<tr>
<td>47</td>
<td>George</td>
</tr>
<td >48</td>
<td>John</td>
</tr>
<tr>
<td>49</td>
<td>Jay</td>
</tr>
<tr>
<td>50</td>
<td>Laura</td>
</tr>
<tr>
<td>51</td>
<td>Michael</td>
</tr>
<tr>
<td>52</td>
<td>George</td>
</tr>
<td >53</td>
<td>John</td>
</tr>
<tr>
<td>54</td>
<td>Jay</td>
</tr>
<tr>
<td>55</td>
<td>Laura</td>
</tr>
<tr>
<td>56</td>
<td>Michael</td>
</tr>
<tr>
<td>57</td>
<td>George</td>
</tr>
<td >58</td>
<td>John</td>
</tr>
<tr>
<td>59</td>
<td>Jay</td>
</tr>
<tr>
<td>60</td>
<td>Laura</td>
</tr>
<tr>
<td>61</td>
<td>Michael</td>
</tr>
<tr>
<td>62</td>
<td>George</td>
</tr>
<tr>
<td >63</td>
<td>John</td>
</tr>
<tr>
<td>64</td>
<td>Jay</td>
</tr>
<tr>
<td>65</td>
<td>Laura</td>
</tr>
<tr>
<td>66</td>
<td>Michael</td>
</tr>
<tr>
<td>67</td>
<td>George</td>
</tr>
<td >68</td>
<td>John</td>
</tr>
<tr>
<td>69</td>
<td>Jay</td>
</tr>
<tr>
<td>70</td>
<td>Laura</td>
</tr>
<tr>
<td>71</td>
<td>Michael</td>
</tr>
<tr>
<td >72</td>
<td>John</td>
</tr>
<tr>
<td>73</td>
<td>Jay</td>
</tr>
<tr>
<td>74</td>
<td>Jay</td>
</tr>
<tr>
<td>75</td>
<td>Laura</td>
</tr>
<tr>
<td>76</td>
<td>Michael</td>
</tr>
<tr>
<td>77</td>
<td>George</td>
</tr>
<td >78</td>
<td>John</td>
</tr>
<tr>
<td>79</td>
<td>Jay</td>
</tr>
<tr>
<td>80</td>
<td>Laura</td>
</tr>
<tr>
<td>81</td>
<td>Michael</td>
</tr>
<tr>
<td >82</td>
<td>John</td>
</tr>
<tr>
<td >83</td>
<td>John</td>
</tr>
<tr>
<td>84</td>
<td>Jay</td>
</tr>
<tr>
<td>85</td>
<td>Laura</td>
</tr>
<tr>
<td>86</td>
<td>Michael</td>
</tr>
<tr>
<td>87</td>
<td>George</td>
</tr>
<td >88</td>
<td>John</td>
</tr>
<tr>
<td>89</td>
<td>Jay</td>
</tr>
<tr>
<td>90</td>
<td>Laura</td>
</tr>
<tr>
<td>91</td>
<td>Michael</td>
</tr>
<tr>
<td>92</td>
<td>Michael</td>
</tr>
<tr>
<td >93</td>
<td>John</td>
</tr>
<tr>
<td>94</td>
<td>Jay</td>
</tr>
<tr>
<td>95</td>
<td>Laura</td>
</tr>
<tr>
<td>96</td>
<td>Michael</td>
</tr>
<tr>
<td>97</td>
<td>George</td>
</tr>
<td >98</td>
<td>John</td>
</tr>
<tr>
<td>99</td>
<td>Jay</td>
</tr>
<tr>
<td>100</td>
<td>Laura</td>
</tr>
</tbody>
</table>
<div id="pager" class="tablesorter" style="top: 900px; position: absolute;">
<form>
<img src="http://tablesorter.com/addons/pager/icons/first.png" class="first">
<img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev">
<img src="http://tablesorter.com/addons/pager/icons/next.png" class="next">
<img src="http://tablesorter.com/addons/pager/icons/last.png" class="last">
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
</select>
</form>
</div>
</body>
</html>
Please help me...

Sum up table columns in a loop using javascript stuck

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>

Jsonp request refuses to work

I got the following code:
var url = 'https://lottery.lafunda.com.do/Lottery/WinningNumbers?key=664cf843-8904-4212-9503-d4733651f519&gobackdays=2&grouped=true&language=es-DO&callback=generateTicker';
$.ajax({
url: url,
accept: "application/javascript",
dataType: "jsonp"
});
function generateTicker(returndata) {
console.log(returndata);
}
But nothing happens. In the console Im getting this message:
"Resource interpreted as Script but transferred with MIME type text/html"
Here is JSfiddle: http://jsfiddle.net/8k8souqj/
Thanks in advance.
EDIT:
Most of you are pointing out the URL does not return valid json. But if I use a modify header extension for chrome and accept "application/javascript" as a header I do get valid javascript:
generateTicker([{"HouseAbbreviation":"LIL","ClosesOn":"2014-10-15T02:10:00","HouseName":"Illinois Noche","Drawings":[{"HouseAbbreviation":"LIL","HouseName":"Illinois Noche","ClosesOn":"2014-10-15T02:10:00","BallCount":2,"PostedNumbers":"3-0"},{"HouseAbbreviation":"LIL","HouseName":"Illinois Noche","ClosesOn":"2014-10-15T02:10:00","BallCount":3,"PostedNumbers":"6-3-0"}... etc
EDIT 2:
Apparently the problem is that jsonp cannot use modified headers as this is not possible via the script tag. Hence the URL will always return html. Thanks to all

That code fetches an HTML page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Winning Numbers</title>
<link rel="stylesheet" type="text/css" href="/assets/css/webordertaker.css" />
<link rel="stylesheet" type="text/css" href="/Content/css/select2.css" />
<script type="text/javascript" src="/Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/Scripts/select2.min.js"></script>
<script type="text/javascript" src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body id="winningNumbersView">
<div id="layoutContainer">
<h2>Números Ganadores</h2>
<table class="table" id="winningNumbersTable">
<thead>
<tr>
<th>Fecha</th>
<th>Casa</th>
<th>Números</th>
</tr>
</thead>
<tbody>
<tr>
<td>14/10/14</td>
<td>LIL Illinois Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-0</td>
<td>6-3-0</td>
<td>7-9-2-2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>NPR Puerto Rico Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-5</td>
<td>4-3-5</td>
<td>0-9-6-3</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LFL Florida Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>4-1</td>
<td>3-4-1</td>
<td>9-9-7-6</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNJ Nueva Jersey Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-9</td>
<td>1-3-9</td>
<td>9-9-6-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNY Nueva York Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-6</td>
<td>8-7-6</td>
<td>6-1-1-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNYMAR Marriage NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>76-61-14</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNYBOR Borlette NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>76-61-14</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>DPR Puerto Rico Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>9-3</td>
<td>5-9-3</td>
<td>6-4-6-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>EIL Illinois Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>9-6</td>
<td>0-9-6</td>
<td>1-4-4-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>EFL Florida Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>5-2</td>
<td>2-5-2</td>
<td>3-9-2-3</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENJ Nueva Jersey Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-2</td>
<td>1-3-2</td>
<td>6-8-7-2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENYMAR Marriage NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>85-02-78</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENYBOR Borlette NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>85-02-78</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENY Nueva York Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>8-5</td>
<td>6-8-5</td>
<td>0-2-7-8</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LIL Illinois Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>2-8</td>
<td>8-2-8</td>
<td>0-1-3-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LFL Florida Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>6-5</td>
<td>0-6-5</td>
<td>5-0-8-2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>NPR Puerto Rico Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>5-6</td>
<td>4-5-6</td>
<td>9-4-1-0</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNJ Nueva Jersey Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-5</td>
<td>4-7-5</td>
<td>7-1-1-8</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNYMAR Marriage NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>71-62-44</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNYBOR Borlette NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>71-62-44</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNY Nueva York Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-1</td>
<td>2-7-1</td>
<td>6-2-4-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>DPR Puerto Rico Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-5</td>
<td>0-7-5</td>
<td>5-2-6-0</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>EIL Illinois Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>9-8</td>
<td>0-9-8</td>
<td>8-1-5-9</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>EFL Florida Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>5-5</td>
<td>9-5-5</td>
<td>2-6-6-8</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENJ Nueva Jersey Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>0-0</td>
<td>5-0-0</td>
<td>0-7-2-7</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENY Nueva York Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>8-4</td>
<td>1-8-4</td>
<td>3-2-9-9</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENYMAR Marriage NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>84-32-99</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENYBOR Borlette NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>84-32-99</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="/Scripts/iframeResizer.contentWindow.js"></script>
</body>
</html>
...but HTML is not valid JSONP.

The callback will never work this way. You will have to add your callback to you ajax request.
var url = 'https://lottery.lafunda.com.do/Lottery/WinningNumbers?key=664cf843-8904-4212-9503-d4733651f519&gobackdays=2&grouped=true&language=es-DO&callback=generateTicker';
$.ajax({
url: url,
accept: "application/javascript",
dataType: "jsonp",
success: generateTicker
});
function generateTicker(returndata) {
console.log(returndata);
}

Your issue is the combination of the two errors, as Jerodev mention, the way you call callback method won't work, and also, what you mentioned the way you send the accept header is not proper either
The following should work
$.ajax({
headers: {
Accept: "application/javascript"
},
url: url,
data: "jsonp",
success : generateTicker
})
function generateTicker(returndata) {
console.log(returndata);
}
The working fiddle
http://jsfiddle.net/8k8souqj/13/

Categories

Resources