set div full height and width in click from another div - javascript

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.

Related

How to detect exact offset top() using jquery after scroll?

I have a table i want to detect offset top of TR where is clicked this is working fine but after scroll page this is not working fine. Why after scroll offset().top is changed? How can fix it?
$(function() {
$('tr').click(function() {
offsetTop = $(this).offset().top;
console.log(offsetTop);
});
});
.myDiv {
overflow-y: auto;
height: 250px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="myDiv">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 1</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 2</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 3</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 4</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 5</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 6</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 7</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 8</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 9</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 10</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

You could always calculate the offset, factoring in the scroll position:
var offset_t = $(selector).offset().top - $(window).scrollTop();
var offset_l = $(selector).offset().left - $(window).scrollLeft();

can javascript event bubbling be done on html controls

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>

Trigger keydown event on mousescroll

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>

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...

How to bifurcate data in table according to a particular value

In the table I am receiving data from the db, and all the marks have a particular value A or B. According to the value I need to separate the data , if the mark has value A it should be stored under the A and if mark has the value B it should be stored under B. I am not sure how to write the jquery for this problem. I have attached a fiddle along with the post. Showing only the html and the required format of the table.
<table style="width:300px">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>Required Table format
<table style="width:300px">
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>
http://jsfiddle.net/yzzp5/

Try this,
<table style="width:300px" id="marksId">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>
Required Table format
<table style="width:300px" id="reqtable">
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
Your script goes here
$(function(){
var data={'a':[],'b':[]};
$('#marksId tr').each(function(index,tr){
if($(tr).find('td').eq(1).text()=='a'){
data.a.push($(tr).find('td').eq(0).text());
}
if($(tr).find('td').eq(1).text()=='b'){
data.b.push($(tr).find('td').eq(0).text());
}
});
var HTML='';
// alert(JSON.stringify(data))
// if both have equal counts
$.each(data.a,function(idx,val){
HTML+='<tr><td>'+data.a[idx]+'</td><td>'+data.b[idx]+'</td></tr>';
});
// alert(HTML);
$('#reqtable').append(HTML);
});
You might need to change this code based on requirement but it will give you an idea to work on
Check Example here also.

Categories

Resources