How to find occurances of numbers in table columns? - javascript

How do I find the numbers from specific columns in a table with the highest occurances and display them in the corresponding cells of another table based on the 10 most occuring numbers?
https://jsfiddle.net/5feak8j0/2/
var col1Array = new Array();
$(document).ready(function() {
$('#stats tr td:nth-child(1)').each(function(i){
col1Array.push($(this).text());
});
alert(col1Array);
});
This just makes an alert with the number with the highest occurrance in each column. But I also need the 2nd most, 3rd most, 4th most ect.. occurring number of each column and have the numbers displayed in the corresponding cell of the table above.


There are a number of ways you can do this. To make this easier on you, you can use lodash. A couple of chained methods in lodash would probably solve this for you. This is actually a good problem to practice your js skills in without using lodash. I suggest you try to come up with solutions before asking here.


Here is a Demo. It is not done fully yet but I have done it so that now can see the col1Array containing all data for each column with their number and how many times in occurrence.
Now you can use that array col1Array and sort it as per max value and then display in your table.
Hope this will helps you.
HTML
<table border="1" align="center" id="display">
<tr>
<th>Mode</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td><b>The Most Occurring Numbers</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>2nd Most Occurring Numbers</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>3rd Most Occurring Numbers</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>4th Most Occurring Numbers</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>5th Most Occurring Numbers</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>6th Most Occurring Numbers</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>7th Most Occurring Numbers</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>8th Most Occurring Numbers</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>9th Most Occurring Numbers</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>10th Most Occurring Numbers</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br><br>
<table border="1" align="center" id="stats">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td>5</td>
<td>8</td>
<td>21</td>
<td>37</td>
<td>46</td>
</tr>
<tr>
<td>5</td>
<td>7</td>
<td>12</td>
<td>19</td>
<td>26</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>34</td>
<td>36</td>
<td>38</td>
</tr>
<tr>
<td>5</td>
<td>11</td>
<td>12</td>
<td>27</td>
<td>32</td>
</tr>
<tr>
<td>10</td>
<td>16</td>
<td>30</td>
<td>41</td>
<td>45</td>
</tr>
<tr>
<td>10</td>
<td>13</td>
<td>19</td>
<td>40</td>
<td>45</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>35</td>
<td>41</td>
<td>45</td>
</tr>
<tr>
<td>15</td>
<td>21</td>
<td>38</td>
<td>39</td>
<td>47</td>
</tr>
<tr>
<td>12</td>
<td>18</td>
<td>43</td>
<td>44</td>
<td>46</td>
</tr>
<tr>
<td>4</td>
<td>11</td>
<td>26</td>
<td>32</td>
<td>41</td>
</tr>
<tr>
<td>11</td>
<td>28</td>
<td>34</td>
<td>37</td>
<td>38</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
<td>16</td>
<td>36</td>
<td>44</td>
</tr>
<tr>
<td>6</td>
<td>10</td>
<td>17</td>
<td>18</td>
<td>42</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>16</td>
<td>47</td>
<td>49</td>
</tr>
<tr>
<td>5</td>
<td>8</td>
<td>19</td>
<td>33</td>
<td>36</td>
</tr>
<tr>
<td>10</td>
<td>22</td>
<td>24</td>
<td>33</td>
<td>38</td>
</tr>
<tr>
<td>8</td>
<td>12</td>
<td>27</td>
<td>31</td>
<td>37</td>
</tr>
<tr>
<td>6</td>
<td>9</td>
<td>13</td>
<td>14</td>
<td>25</td>
</tr>
<tr>
<td>9</td>
<td>22</td>
<td>23</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>12</td>
<td>15</td>
<td>18</td>
<td>24</td>
<td>25</td>
</tr>
</table>
JS
var col1Array = new Array();
$(document).ready(function () {
var totalNoOfColumns = $('#stats tr:first').find('th').length;
for(var i=1;i<=totalNoOfColumns;i++) {
col1Array[i] = [];
var tempArray = [];
$('#stats tr td:nth-child(' + i + ')').each(function (i) {
tempArray[$(this).text()] = (tempArray[$(this).text()]) ? parseInt(tempArray[$(this).text()]) + 1 : 1;
});
col1Array[i] = tempArray;
}
console.log(col1Array);
});
Hope this will helps you!


You can do something like this using sort().
var col1Array = [];
// getting counts of values of each column
$('#stats tr td').each(function(i) {
var ind = $(this).index(),
pind = $(this).parent().index(),
num = $(this).text();
if (pind == 1) {
col1Array[ind] = {};
}
col1Array[ind][num] = col1Array[ind].hasOwnProperty(num) ? col1Array[ind][num] + 1 : 1;
});
var sorted = [];
// soting value based on count
for (var v in col1Array) {
v = col1Array[v];
sorted.push(Object.keys(v).sort(function(a, b) {
if (v[a] < v[b]) return 1;
if (v[a] > v[b]) return -1;
return 0;
}));
}
console.log(sorted);
// updating value to table using sorted array
$('#res tr td').each(function() {
var ind = $(this).index(),
pind = $(this).parent().index();
if (pind > 0 && ind > 0) {
$(this).text(sorted[ind - 1][pind - 1]);
}
})
body {
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: black;
text-align: center;
}
table {
position: relative;
top: 5%;
width: 20px;
height: 5%;
border: solid 1px black;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" align="center" id=res>
<tr>
<th>Mode</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td><b>The Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>2nd Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>3rd Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>4th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>5th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>6th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>7th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>8th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>9th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>10th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<br>
<table id=stats border="1" align="center">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td>5</td>
<td>8</td>
<td>21</td>
<td>37</td>
<td>46</td>
</tr>
<tr>
<td>5</td>
<td>7</td>
<td>12</td>
<td>19</td>
<td>26</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>34</td>
<td>36</td>
<td>38</td>
</tr>
<tr>
<td>5</td>
<td>11</td>
<td>12</td>
<td>27</td>
<td>32</td>
</tr>
<tr>
<td>10</td>
<td>16</td>
<td>30</td>
<td>41</td>
<td>45</td>
</tr>
<tr>
<td>10</td>
<td>13</td>
<td>19</td>
<td>40</td>
<td>45</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>35</td>
<td>41</td>
<td>45</td>
</tr>
<tr>
<td>15</td>
<td>21</td>
<td>38</td>
<td>39</td>
<td>47</td>
</tr>
<tr>
<td>12</td>
<td>18</td>
<td>43</td>
<td>44</td>
<td>46</td>
</tr>
<tr>
<td>4</td>
<td>11</td>
<td>26</td>
<td>32</td>
<td>41</td>
</tr>
<tr>
<td>11</td>
<td>28</td>
<td>34</td>
<td>37</td>
<td>38</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
<td>16</td>
<td>36</td>
<td>44</td>
</tr>
<tr>
<td>6</td>
<td>10</td>
<td>17</td>
<td>18</td>
<td>42</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>16</td>
<td>47</td>
<td>49</td>
</tr>
<tr>
<td>5</td>
<td>8</td>
<td>19</td>
<td>33</td>
<td>36</td>
</tr>
<tr>
<td>10</td>
<td>22</td>
<td>24</td>
<td>33</td>
<td>38</td>
</tr>
<tr>
<td>8</td>
<td>12</td>
<td>27</td>
<td>31</td>
<td>37</td>
</tr>
<tr>
<td>6</td>
<td>9</td>
<td>13</td>
<td>14</td>
<td>25</td>
</tr>
<tr>
<td>9</td>
<td>22</td>
<td>23</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>12</td>
<td>15</td>
<td>18</td>
<td>24</td>
<td>25</td>
</tr>
</table>


This could probably be the shortest and fool-proof solution:
var $input = $('table:last'),
$output = $('table:first');
$('th', $input).each(function(i) {
var stat = {};
$('td:nth-child(' + (i+1) + ')', $input).each(function() {
var num = +$.text(this);
stat[num] = stat[num] ? stat[num] + 1 : 1;
});
$('td:nth-child(' + (i+2) + ')', $output).text(function() {
var mn = '-', mc = 0;
$.each(stat, function(num, count) {
if (mc < count) {
mc = count;
mn = num;
}
});
delete stat[mn];
return mn;
});
});
DEMO: https://jsfiddle.net/5feak8j0/36/
var $input = $('table:last'),
$output = $('table:first');
$('th', $input).each(function(i) {
var stat = {};
$('td:nth-child(' + (i+1) + ')', $input).each(function() {
var num = +$.text(this);
stat[num] = stat[num] ? stat[num] + 1 : 1;
});
$('td:nth-child(' + (i+2) + ')', $output).text(function() {
var mn = '-', mc = 0;
$.each(stat, function(num, count) {
if (mc < count) {
mc = count;
mn = num;
}
});
delete stat[mn];
return mn;
});
});
body {
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: black;
text-align: center;
}
table {
position: relative;
top: 5%;
width: 20px;
height: 5%;
border: solid 1px black;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" align="center">
<tr>
<th>Mode</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td><b>The Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>2nd Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>3rd Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>4th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>5th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>6th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>7th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>8th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>9th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>10th Most Occurring Numbers</b>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<br>
<table border="1" align="center">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td>5</td>
<td>8</td>
<td>21</td>
<td>37</td>
<td>46</td>
</tr>
<tr>
<td>5</td>
<td>7</td>
<td>12</td>
<td>19</td>
<td>26</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>34</td>
<td>36</td>
<td>38</td>
</tr>
<tr>
<td>5</td>
<td>11</td>
<td>12</td>
<td>27</td>
<td>32</td>
</tr>
<tr>
<td>10</td>
<td>16</td>
<td>30</td>
<td>41</td>
<td>45</td>
</tr>
<tr>
<td>10</td>
<td>13</td>
<td>19</td>
<td>40</td>
<td>45</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>35</td>
<td>41</td>
<td>45</td>
</tr>
<tr>
<td>15</td>
<td>21</td>
<td>38</td>
<td>39</td>
<td>47</td>
</tr>
<tr>
<td>12</td>
<td>18</td>
<td>43</td>
<td>44</td>
<td>46</td>
</tr>
<tr>
<td>4</td>
<td>11</td>
<td>26</td>
<td>32</td>
<td>41</td>
</tr>
<tr>
<td>11</td>
<td>28</td>
<td>34</td>
<td>37</td>
<td>38</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
<td>16</td>
<td>36</td>
<td>44</td>
</tr>
<tr>
<td>6</td>
<td>10</td>
<td>17</td>
<td>18</td>
<td>42</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>16</td>
<td>47</td>
<td>49</td>
</tr>
<tr>
<td>5</td>
<td>8</td>
<td>19</td>
<td>33</td>
<td>36</td>
</tr>
<tr>
<td>10</td>
<td>22</td>
<td>24</td>
<td>33</td>
<td>38</td>
</tr>
<tr>
<td>8</td>
<td>12</td>
<td>27</td>
<td>31</td>
<td>37</td>
</tr>
<tr>
<td>6</td>
<td>9</td>
<td>13</td>
<td>14</td>
<td>25</td>
</tr>
<tr>
<td>9</td>
<td>22</td>
<td>23</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>12</td>
<td>15</td>
<td>18</td>
<td>24</td>
<td>25</td>
</tr>
</table>

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.

How to set different background color of every three html table rows in alternate

Suppose I have two HTML tables named table1 and table2. If I want to have different background of every alternative three rows of table2, how can I achieve that using CSS? For example set background of first 3 rows as blue, then another 3 rows as green, again another 3 rows as blue, again another 3 rows as green and so on. Basically I want two different background colors for every three rows in alternate. I found CSS styling for even and odd rows, or every nth rows, but not for this case. I have attached the screenshot of sample table. Rather than hard coding in individual row like in this code, I want to do it in CSS styling.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 1px;
}
<table id="table2">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr bgcolor="#dddddd">
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr bgcolor="#dddddd">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr bgcolor="#dddddd">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr bgcolor="#dddddd">
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr bgcolor="#dddddd">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr bgcolor="#dddddd">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
Any help is appreciated]1

You can use "nth-child" to achieve this.
tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
background: #dddddd;
}
Try with below snippet
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 1px;
}
tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
background: #dddddd;
}
<table id="table2">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td >Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td >Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>

You want the alternative color for every three group of rows. Let explain the formula of css tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) where n=0,1,2,3......this tr selection will start from 1-3, 7-9....
Likewise tr:nth-child(6n+4),
tr:nth-child(6n+5),
tr:nth-child(6n+6) where n=0,1,2,3......this tr selection will start from 4-6, 10-12....
tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
background: blue;
}
tr:nth-child(6n+4),
tr:nth-child(6n+5),
tr:nth-child(6n+6) {
background: green;
}
table {
color: #fff;
}
<table id="table2">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
now you will get alternative color of blue and green as your requirement

You can use javascript for set the background-color
$('document').ready(function(){
$('#table1 tr').each((index, value) => {
if(index % 3 != 0){
value.css({'background-color': '#0000FF'});
}else{
value.css({'background-color': '#00FF00'});
}
});
});
or define two css class
.blue {background-color: #0000FF;}
.green {background-color: #00FF00;}
and assign this class in all tr of table you want

You can separate the header and body and use nth-child concept
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
table tbody tr:nth-child(6n+1),table tbody tr:nth-child(6n+2),table tbody
tr:nth-child(6n+3) {
background: #dddddd;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 1px;
}
</style>
</head>
<body>
<table id="table2">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#dddddd">
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr bgcolor="#dddddd">
<td >Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr bgcolor="#dddddd">
<td >Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr bgcolor="#dddddd">
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr bgcolor="#dddddd">
<td >Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr bgcolor="#dddddd">
<td >Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tbody>
</table>
</body>
</html>

<html>
<head>
<title></title>
<style>
.green{background-color:white;}
.blue{background-color:gray;}
</style>
<script>
function alterColor(id){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr"); //get all the rows
for(i = 0; i < rows.length; i++){ //alterColor styles
doalterColor(rows[i], i);
}
}
function doalterColor(row, i){
if((i % 6 == 0) ||(i % 6 == 1)||(i % 6 == 2)){
row.className = "blue";
}else{
row.className = "green";
}
}
</script>
</head>
<body onLoad="alterColor('mytable')">
<table id="mytable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr><tr>
<td>cell 2</td>
<td>cell 2</td>
</tr><tr>
<td>cell 3</td>
<td>cell 2</td>
</tr><tr>
<td>cell 4</td>
<td>cell 2</td>
</tr><tr>
<td>cell 5</td>
<td>cell 2</td>
</tr><tr>
<td>cell 6</td>
<td>cell 2</td>
</tr><tr>
<td>cell 7</td>
<td>cell 2</td>
</tr><tr>
<td>cell 8</td>
<td>cell 2</td>
</tr><tr>
<td>cell 9</td>
<td>cell 2</td>
</tr><tr>
<td>cell 10</td>
<td>cell 2</td>
</tr><tr>
<td>cell 11</td>
<td>cell 2</td>
</tr><tr>
<td>cell 12</td>
<td>cell 2</td>
</tr><tr>
<td>cell 13</td>
<td>cell 2</td>
</tr>
</table>
</body>

Footable Sorting by incomplete line

In my table, the lines are form:
97.5%,
10/30,
41 RPM,
3.6 seconds,
$4750,
$100
If I set the type data-type = "number" in the rows everything is removed except for the numbers, but I need to be output completely as I wrote in the example.
How can I do what sorted by numeric values only? I think it can be realise through the JS, but I do not know it.
Regarding the second line, I want to be sorted by numbers before the character "/"
jQuery(function($) {
$('.table').footable();
});
body>table>thead>tr>th {
text-transform: capitalize;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table" data-sorting="true">
<thead>
<tr>
<th data-breakpoints="xs" data-type="number">rank</th>
<th>weapon name</th>
<th data-type="number">damage</th>
<th data-breakpoints="xs" data-type="number" data-decimal-separator=".">armor pen</th>
<th data-breakpoints="xs sm" data-type="number">magazine capacity</th>
<th data-breakpoints="xs sm md" data-type="number">rate of fire</th>
<th data-breakpoints="xs sm md" data-type="number" data-decimal-separator=".">reload time</th>
<th data-breakpoints="xs sm md" data-type="number">price</th>
<th data-breakpoints="xs sm md" data-type="number">reward</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AWP</td>
<td>115</td>
<td>97.5%</td>
<td>10/30</td>
<td>41 RPM</td>
<td>3.6 seconds</td>
<td>$4750</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>*SCAR-20</td>
<td>80</td>
<td>82.5%</td>
<td>20/90</td>
<td>240 RPM</td>
<td>3.1 seconds</td>
<td>$5000</td>
<td>$300</td>
</tr>
<tr>
<td>3</td>
<td>*G3SG1</td>
<td>80</td>
<td>82.5%</td>
<td>20/90</td>
<td>240 RPM</td>
<td>4.7 seconds</td>
<td>$5000</td>
<td>$300</td>
</tr>
<tr>
<td>4</td>
<td>*Negev</td>
<td>35</td>
<td>75%</td>
<td>150/200</td>
<td>1000 RPM</td>
<td>5.7 seconds</td>
<td>$5700</td>
<td>$300</td>
</tr>
<tr>
<td>5</td>
<td>*M249</td>
<td>32</td>
<td>80%</td>
<td>100/200</td>
<td>750 RPM</td>
<td>5.7 seconds</td>
<td>$5200</td>
<td>$300</td>
</tr>
<tr>
<td>6</td>
<td>*SG 553</td>
<td>30</td>
<td>100%</td>
<td>30/90</td>
<td>666 RPM</td>
<td>2.8 seconds</td>
<td>$3000</td>
<td>$300</td>
</tr>
<tr>
<td>7</td>
<td>AK-47</td>
<td>36</td>
<td>77.5%</td>
<td>30/90</td>
<td>600 RPM</td>
<td>2.5 seconds</td>
<td>$2700</td>
<td>$300</td>
</tr>
<tr>
<td>8</td>
<td>M4A4</td>
<td>33</td>
<td>70%</td>
<td>30/90</td>
<td>666 RPM</td>
<td>3.1 seconds</td>
<td>$3100</td>
<td>$300</td>
</tr>
<tr>
<td>9</td>
<td>M4A1-S</td>
<td>33</td>
<td>70%</td>
<td>20/40</td>
<td>666 RPM</td>
<td>3.1 seconds</td>
<td>$3200</td>
<td>$300</td>
</tr>
<tr>
<td>10</td>
<td>*AUG</td>
<td>28</td>
<td>90%</td>
<td>30/90</td>
<td>666 RPM</td>
<td>3.8 seconds</td>
<td>$3300</td>
<td>$300</td>
</tr>
<tr>
<td>11</td>
<td>Galil AR</td>
<td>30</td>
<td>77.5%</td>
<td>35/90</td>
<td>666 RPM</td>
<td>3.0 seconds</td>
<td>$2000</td>
<td>$300</td>
</tr>
<tr>
<td>12</td>
<td>Famas</td>
<td>30</td>
<td>70%</td>
<td>25/90</td>
<td>666 RPM</td>
<td>3.3 seconds</td>
<td>$2250</td>
<td>$300</td>
</tr>
<tr>
<td>13</td>
<td>^P90</td>
<td>26</td>
<td>69%</td>
<td>50/100</td>
<td>857 RPM</td>
<td>3.3 seconds</td>
<td>$2350</td>
<td>$300</td>
</tr>
<tr>
<td>14</td>
<td>SSG 08</td>
<td>88</td>
<td>85%</td>
<td>10/90</td>
<td>48 RPM</td>
<td>3.7 seconds</td>
<td>$1700</td>
<td>$300</td>
</tr>
<tr>
<td>15</td>
<td>Mag-7</td>
<td>240</td>
<td>75%</td>
<td>5/32</td>
<td>71 RPM</td>
<td>2.4 seconds</td>
<td>$1800</td>
<td>$900</td>
</tr>
<tr>
<td>16</td>
<td>UMP-45</td>
<td>35</td>
<td>65%</td>
<td>25/100</td>
<td>666 RPM</td>
<td>3.5 seconds</td>
<td>$1200</td>
<td>$600</td>
</tr>
<tr>
<td>17</td>
<td>*XM1014</td>
<td>120</td>
<td>80%</td>
<td>7/32</td>
<td>240 RPM</td>
<td>4.5 seconds</td>
<td>$2000</td>
<td>$900</td>
</tr>
<tr>
<td>18</td>
<td>*PP-Bizon</td>
<td>27</td>
<td>57.5%</td>
<td>64/120</td>
<td>750 RPM</td>
<td>2.4 seconds</td>
<td>$1400</td>
<td>$600</td>
</tr>
<tr>
<td>19</td>
<td>*Nova</td>
<td>243</td>
<td>50%</td>
<td>8/32</td>
<td>68 RPM</td>
<td>5.6 seconds</td>
<td>$1200</td>
<td>$900</td>
</tr>
<tr>
<td>20</td>
<td>*MP7</td>
<td>29</td>
<td>62.5%</td>
<td>30/120</td>
<td>800 RPM</td>
<td>3.1 seconds</td>
<td>$1700</td>
<td>$600</td>
</tr>
<tr>
<td>21</td>
<td>*Mac 10</td>
<td>29</td>
<td>57.5%</td>
<td>30/100</td>
<td>800 RPM</td>
<td>2.6 seconds</td>
<td>$1050</td>
<td>$600</td>
</tr>
<tr>
<td>22</td>
<td>*MP9</td>
<td>26</td>
<td>60%</td>
<td>30/120</td>
<td>857 RPM</td>
<td>2.1 seconds</td>
<td>$1250</td>
<td>$600</td>
</tr>
<tr>
<td>23</td>
<td>*Sawed-Off</td>
<td>256</td>
<td>75%</td>
<td>7/32</td>
<td>71 RPM</td>
<td>5.0 seconds</td>
<td>$1200</td>
<td>$900</td>
</tr>
</tbody>
</table>
</body>
</html>
If above snippet won't work check this ---> Footable Sorting

You can use data-sort-value data attribute to manually set the value for sorting.
From Footable Sorting Doc
Cell options
sortValue : The value used by the component to perform
sorting operations.
To supply this option through data attributes you must specify the
attribute on the td element.
You can achieve this by either directly using data-sort-value inside a td or you can use javascript
1. Static Example
<table>
<tr>
<td data-sort-value="My Sort Value">...</td>
...
</tr>
...
</table>
2. Javascript Example
jQuery(function($){
$('.table').footable({
"rows": [{
"id": {
"options": {
"sortValue": "My Sort Value"
},
"value": ...
}
},{
...
}]
});
})
Below is the modified version of your snippet
jQuery(function($) {
$('.table').footable();
});
body>table>thead>tr>th {
text-transform: capitalize;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table" data-sorting="true">
<thead>
<tr>
<th data-breakpoints="xs" data-type="number">rank</th>
<th>weapon name</th>
<th data-type="number">damage</th>
<th data-breakpoints="xs" data-type="number" data-decimal-separator=".">armor pen</th>
<th data-breakpoints="xs sm">magazine capacity</th>
<th data-breakpoints="xs sm md">rate of fire</th>
<th data-breakpoints="xs sm md" data-type="number" data-decimal-separator=".">reload time</th>
<th data-breakpoints="xs sm md">price</th>
<th data-breakpoints="xs sm md">reward</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AWP</td>
<td>115</td>
<td data-sort-value="97.5">97.5%</td>
<td data-sort-value="10">10/30</td>
<td data-sort-value="41">41 RPM</td>
<td data-sort-value="3.6">3.6 seconds</td>
<td data-sort-value="4750">$4750</td>
<td data-sort-value="100">$100</td>
</tr>
<tr>
<td>2</td>
<td>*SCAR-20</td>
<td>80</td>
<td data-sort-value="82.5">82.5%</td>
<td data-sort-value="20">20/90</td>
<td data-sort-value="240">240 RPM</td>
<td data-sort-value="3.1">3.1 seconds</td>
<td data-sort-value="5000">$5000</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>3</td>
<td>*G3SG1</td>
<td>80</td>
<td data-sort-value="82.5">82.5%</td>
<td data-sort-value="20">20/90</td>
<td data-sort-value="240">240 RPM</td>
<td data-sort-value="4.7">4.7 seconds</td>
<td data-sort-value="5000">$5000</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>4</td>
<td>*Negev</td>
<td>35</td>
<td data-sort-value="75">75%</td>
<td data-sort-value="150">150/200</td>
<td data-sort-value="1000">1000 RPM</td>
<td data-sort-value="5.7">5.7 seconds</td>
<td data-sort-value="5700">$5700</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>5</td>
<td>*M249</td>
<td>32</td>
<td data-sort-value="80">80%</td>
<td data-sort-value="100">100/200</td>
<td data-sort-value="750">750 RPM</td>
<td data-sort-value="5.7">5.7 seconds</td>
<td data-sort-value="5200">$5200</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>6</td>
<td>*SG 553</td>
<td>30</td>
<td data-sort-value="100">100%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="2.8">2.8 seconds</td>
<td data-sort-value="3000">$3000</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>7</td>
<td>AK-47</td>
<td>36</td>
<td data-sort-value="77.5">77.5%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="600">600 RPM</td>
<td data-sort-value="2.5">2.5 seconds</td>
<td data-sort-value="2700">$2700</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>8</td>
<td>M4A4</td>
<td>33</td>
<td data-sort-value="70">70%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="3.1">3.1 seconds</td>
<td data-sort-value="3100">$3100</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>9</td>
<td>M4A1-S</td>
<td>33</td>
<td data-sort-value="70">70%</td>
<td data-sort-value="20">20/40</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="3.1">3.1 seconds</td>
<td data-sort-value="3200">$3200</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>10</td>
<td>*AUG</td>
<td>28</td>
<td data-sort-value="90">90%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="3.8">3.8 seconds</td>
<td data-sort-value="3300">$3300</td>
<td data-sort-value="300">$300</td>
</tr>
</tbody>
</table>
</body>
</html>
If above snippet won't work, try this ---> Sorting using Footable

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

getting values of table column based on id

I have created a table in which I want all the values within the Name columns(which is hidden). I have used the below jquery code which uses nth-child(4) for getting all the values, but the issue is that this table is coming from another application, so say if the table is inserting another column in between then the below code wont work. I am having an id for the column header as name
Can anyone please tell me any solution for getting the column values based on the class or id.
Als how can we check if the id is present or missing, if id is missing then apply the below logic
$('#content table tbody tr td:nth-child(4)').each(function() {
console.log('seee:', $(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="content">
<table border="1">
<thead>
<tr>
<th>Test1</th>
<th>Test2</th>
<th>Test3</th>
<th id="name" style="display:none">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
<td>54</td>
<td>76</td>
<td style="display:none">jacob</td>
</tr>
<tr>
<td>34</td>
<td>54</td>
<td>32</td>
<td style="display:none">jacob</td>
</tr>
<tr>
<td>65</td>
<td>78</td>
<td>56</td>
<td style="display:none">lessi</td>
</tr>
<tr>
<td>34</td>
<td>65</td>
<td>34</td>
<td style="display:none">messi</td>
</tr>
<tr>
<td>32</td>
<td>65</td>
<td>76</td>
<td style="display:none">messi</td>
</tr>
<tr>
<td>54</td>
<td>65</td>
<td>34</td>
<td style="display:none">firoz</td>
</tr>
<tr>
<td>56</td>
<td>76</td>
<td>87</td>
<td style="display:none">firoz</td>
</tr>
<tr>
<td>65</td>
<td>67</td>
<td>65</td>
<td style="display:none">firoz</td>
</tr>
<tr>
<td>76</td>
<td>67</td>
<td>56</td>
<td style="display:none">messi</td>
</tr>
<tr>
<td>76</td>
<td>65</td>
<td>54</td>
<td style="display:none">messi</td>
</tr>
</tbody>
</table>
</div>

You can get the index of the #name element and then use it in the nth-child selector
var ids = $('#name').index();
$('#content table tbody tr td:nth-child(' + (ids + 1) + ')').each(function() {
console.log('seee:', $(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<table border="1">
<thead>
<tr>
<th>Test1</th>
<th>Test2</th>
<th>Test3</th>
<th id="name" style="display:none">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
<td>54</td>
<td>76</td>
<td style="display:none">jacob</td>
</tr>
<tr>
<td>34</td>
<td>54</td>
<td>32</td>
<td style="display:none">jacob</td>
</tr>
<tr>
<td>65</td>
<td>78</td>
<td>56</td>
<td style="display:none">lessi</td>
</tr>
<tr>
<td>34</td>
<td>65</td>
<td>34</td>
<td style="display:none">messi</td>
</tr>
<tr>
<td>32</td>
<td>65</td>
<td>76</td>
<td style="display:none">messi</td>
</tr>
<tr>
<td>54</td>
<td>65</td>
<td>34</td>
<td style="display:none">firoz</td>
</tr>
<tr>
<td>56</td>
<td>76</td>
<td>87</td>
<td style="display:none">firoz</td>
</tr>
<tr>
<td>65</td>
<td>67</td>
<td>65</td>
<td style="display:none">firoz</td>
</tr>
<tr>
<td>76</td>
<td>67</td>
<td>56</td>
<td style="display:none">messi</td>
</tr>
<tr>
<td>76</td>
<td>65</td>
<td>54</td>
<td style="display:none">messi</td>
</tr>
</tbody>
</table>
</div>

You can use :last-child assuming that the new td is being added between the testX fields.
Alternatively, you can find the name header, get its index() and then find the td values from there:
var nameTdIndex = $('#name').index() + 1;
$('#content td:nth-child(' + nameTdIndex + ')').each(function() {
console.log('seee:', $(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="content">
<table border="1">
<thead>
<tr>
<th>Test1</th>
<th>Test2</th>
<th>Test3</th>
<th id="name" style="display:none">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
<td>54</td>
<td>76</td>
<td style="display:none">jacob</td>
</tr>
<tr>
<td>34</td>
<td>54</td>
<td>32</td>
<td style="display:none">jacob</td>
</tr>
<tr>
<td>65</td>
<td>78</td>
<td>56</td>
<td style="display:none">lessi</td>
</tr>
<tr>
<td>34</td>
<td>65</td>
<td>34</td>
<td style="display:none">messi</td>
</tr>
<tr>
<td>32</td>
<td>65</td>
<td>76</td>
<td style="display:none">messi</td>
</tr>
<tr>
<td>54</td>
<td>65</td>
<td>34</td>
<td style="display:none">firoz</td>
</tr>
<tr>
<td>56</td>
<td>76</td>
<td>87</td>
<td style="display:none">firoz</td>
</tr>
<tr>
<td>65</td>
<td>67</td>
<td>65</td>
<td style="display:none">firoz</td>
</tr>
<tr>
<td>76</td>
<td>67</td>
<td>56</td>
<td style="display:none">messi</td>
</tr>
<tr>
<td>76</td>
<td>65</td>
<td>54</td>
<td style="display:none">messi</td>
</tr>
</tbody>
</table>
</div>

Categories

Resources