Javascript/jQuery Tables Element Grabbing [duplicate] - javascript

This question already has answers here:
get the value of any clicked td jquery
(2 answers)
Closed 4 years ago.
I have a problem, I wish to grab the value thingy in a "td"
This is my code:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</table>
I have tried giving them classes and onclick functions() but is there a way without creating a thousand or so functions and ids.


You can have onclick event handle on table (using id or class selector in jquery). See below code
$(function(){ // this is to ensure if all DOM loaded
$("#tableToRead td").on("click", function(){ // click handler for each td inside tableToRead table
var value = $(this).text();// here $(this) refer to clicked td and using .text() gives text inside td.
alert(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableToRead">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</table>


Use event delegation: add a single listener to the table, and then examine the target of all click events. If the clicked element matches a td, get the textContent of that td:
document.querySelector('table').addEventListener('click', ({ target }) => {
if (!target.matches('td')) return;
console.log('clicked on element with textContent: ' + target.textContent);
});
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</table>
(Ideally, give the one table an id so that you can select it by selecting that id, rather than using querySelector('table'), which will select the first table in your document, no matter what it is)


Hope this will help you
$('#tbl').on('click','td',function(){
var myValue= $(this).html();
var prevValue=$(this).prev('td').html();
var nextValue=$(this).next('td').html();
alert('myvalue='+myValue+', prevValue='+prevValue+',nextValue='+nextValue+'');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</table>

Related

Change the colour of the 2nd column by comparing it with the 1st column

enter image description here
If there is a change in the number in the column, its colour should get change as well.
There are 7 columns.
Compare 1st column with the second. If the numbers are changed, its colour should get change.
Example in first row "134", "139" then "139" value colour should get change.
In second row "4" "4" is repeated, then its colour should not get change.
<table style="width:80%" id="customers" align="center">
<tr>
<th style="background-color:white;" colspan="2"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search Here" title="Type in a name"></th>
<th colspan="7"> asfdasdf</th>
</tr>
<tr>
<th colspan="2"><select class="ui dropdown" id="myselection">
<option value="One">Readvon</option>
<option value="Two">sdctry</option>
<option value="Three">scv</option>
<option value="four">sdv</option>
</select></th>
<th>Nov_2013</th>
<th>March_2014</th>
<th>Dec_2015</th>
<th>Nov_2017</th>
<th>April_2018</th>
<th>Feb_2019</th>
<th>April_2019</th>
</tr>
</table>
<div id="showOne">
<table style="width:80%" id="customers" align="center">
<tr>
<td colspan='2' style='color:red'>Total</td>
<td>134</td>
<td>139</td>
<td>137</td>
<td>158</td>
<td>144</td>
<td>146</td>
<td>140</td>
<tr>
<td colspan='2'>Aadc</td>
<td>0</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>4</td>
<tr>
<td colspan='2'>Asdvacific</td>
<td>48</td>
<td>45</td>
<td>33</td>
<td>36</td>
<td>33</td>
<td>34</td>
<td>33</td>
<tr>
<td colspan='2'>Eafcdpe</td>
<td>45</td>
<td>42</td>
<td>46</td>
<td>53</td>
<td>48</td>
<td>52</td>
<td>50</td>
<tr>
<td colspan='2'>Inasdca</td>
<td>0</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>3</td>
<tr>
<td colspan='2'>MsCDNA</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>6</td>
<td>6</td>
<tr>
<td colspan='2'>NortScerica</td>
<td>37</td>
<td>38</td>
<td>44</td>
<td>49</td>
<td>48</td>
<td>41</td>
<td>40</td>
<tr>
<td colspan='2'>SouacAmerica</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</div>
</table>

You have to do something like below. Read about HTMLTableElement. You have to access rows first and then columns. Compare text in each column...
var table = document.getElementsByTagName('table');
var rows = table[0].rows
var rowsLength = rows.length;
var columns;
var columnsLength;
for (var i = 0; i < rowsLength; i++) {
columns = rows[i].cells;
columnsLength = columns.length;
// We don't need first column, as it contains the text
for (var j = 1; j < columnsLength - 1; j++) {
if (parseInt(columns[j].innerText) != parseInt(columns[j + 1].innerText)) {
columns[j + 1].style.color = 'green';
}
}
}
<table style="width:80%" id="customers" align="center">
<tr>
<td colspan='2' style='color:red'>Total</td>
<td>134</td>
<td>139</td>
<td>137</td>
<td>158</td>
<td>144</td>
<td>146</td>
<td>140</td>
</tr>
<tr>
<td colspan='2'>Aadc</td>
<td>0</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td colspan='2'>Asdvacific</td>
<td>48</td>
<td>45</td>
<td>33</td>
<td>36</td>
<td>33</td>
<td>34</td>
<td>33</td>
</tr>
<tr>
<td colspan='2'>Eafcdpe</td>
<td>45</td>
<td>42</td>
<td>46</td>
<td>53</td>
<td>48</td>
<td>52</td>
<td>50</td>
</tr>
<tr>
<td colspan='2'>Inasdca</td>
<td>0</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td colspan='2'>MsCDNA</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td colspan='2'>NortScerica</td>
<td>37</td>
<td>38</td>
<td>44</td>
<td>49</td>
<td>48</td>
<td>41</td>
<td>40</td>
</tr>
<tr>
<td colspan='2'>SouacAmerica</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>4</td>
<td>4</td>
</tr>
</table>

How to find occurances of numbers in table columns?

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>

Slider functionality for html table

I am having a plain html table which I need to apply sorting and sliding feature using jQuery. I have applied the sorting through by using DataTable.js jQuery library. Sorting is working fine but don't know how to apply slider to the table like as shown below making all the subjects columns within a slider and student name and total columns as fixed
Can anyone please tell me some solution for this?
My code is as given below
Working Demo
script
$(document).ready(function () {
myTable= $('#myTable').dataTable({
"bInfo": false,
"bLengthChange": false,
"bPaginate": false
});
});
html
<table id="myTable" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Student</th>
<th>Maths</th>
<th>Physics</th>
<th>Geography</th>
<th>History</th>
<th>English</th>
<th>Computer</th>
<th>Biology</th>
<th>Chemistry</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jeffrey</td>
<td>55</td>
<td>22</td>
<td>66</td>
<td>32</td>
<td>34</td>
<td>56</td>
<td>67</td>
<td>85</td>
<td>445</td>
</tr>
<tr>
<td>Mathew</td>
<td>32</td>
<td>43</td>
<td>45</td>
<td>76</td>
<td>78</td>
<td>98</td>
<td>87</td>
<td>77</td>
<td>545</td>
</tr>
<tr>
<td>Linson</td>
<td>23</td>
<td>87</td>
<td>87</td>
<td>98</td>
<td>97</td>
<td>86</td>
<td>75</td>
<td>75</td>
<td>454</td>
</tr>
<tr>
<td>Filson</td>
<td>45</td>
<td>76</td>
<td>87</td>
<td>77</td>
<td>88</td>
<td>55</td>
<td>78</td>
<td>98</td>
<td>545</td>
</tr>
<tr>
<td>Felix</td>
<td>87</td>
<td>90</td>
<td>90</td>
<td>89</td>
<td>97</td>
<td>96</td>
<td>70</td>
<td>86</td>
<td>565</td>
</tr>
<tr>
<td>Akhil</td>
<td>78</td>
<td>98</td>
<td>65</td>
<td>65</td>
<td>67</td>
<td>56</td>
<td>87</td>
<td>90</td>
<td>676</td>
</tr>
<tr>
<td>Arjun</td>
<td>67</td>
<td>88</td>
<td>77</td>
<td>66</td>
<td>55</td>
<td>44</td>
<td>45</td>
<td>45</td>
<td>788</td>
</tr>
<tr>
<td>Arun</td>
<td>57</td>
<td>87</td>
<td>55</td>
<td>66</td>
<td>77</td>
<td>88</td>
<td>99</td>
<td>77</td>
<td>898</td>
</tr>
</tbody>
</table>

Fixed header plugin could help you regarding this. You can see the fixed header in example here.
updatedJSFiddle example

https://datatables.net/examples/basic_init/scroll_x.html
Add scrollX to your dataTable
$(document).ready(function() {
$('#example').dataTable( {
"scrollX": true
} );
} );

Catch cell value specifies an HTML table with jquery

I need to get the contents of <tr> containing his first <td> equal to "4" in the third an textbox. In this case appear the number "2099451" in the textbox.
<table id="tableHtml">
<tr>
<td>rank</td>
<td>place</td>
<td>population</td>
<td>lat</td>
<td>lo</td>
</tr>
<tr>
<td>1</td>
<td>New York city</td>
<td>8175133</td>
<td>40.71455</td>
<td>-74.00712</td>
</tr>
<tr>
<td>2</td>
<td>Los Angeles city</td>
<td>3792621</td>
<td>34.05349</td>
<td>-118.24532</td>
</tr>
<tr>
<td>3</td>
<td>Chicago city</td>
<td>2695598</td>
<td>45.37399</td>
<td>-92.88875</td>
</tr>
<tr>
<td>4</td>
<td>Houston city</td>
<td>2099451</td>
<td>41.337462</td>
<td>-75.73362</td>
</tr>
<tr>
<td>5</td>
<td>Philadelphia city</td>
<td>1526006</td>
<td>37.15477</td>
<td>-94.48611</td>
</tr>
<tr>
<td>6</td>
<td>Phoenix city</td>
<td>1445632</td>
<td>32.46764</td>
<td>-85.00082</td>
</tr>
<tr>
<td>7</td>
<td>San Antonio city</td>
<td>1327407</td>
<td>37.706576</td>
<td>-122.44061</td>
</tr>
<tr>
<td>8</td>
<td>San Diego city</td>
<td>1307402</td>
<td>37.707815</td>
<td>-122.46662</td>
</tr>
<tr>
<td>9</td>
<td>Dallas city</td>
<td>1197816</td>
<td>40.636</td>
<td>-91.16830</td>
</tr>
<tr>
<td>10</td>
<td>San Jose city</td>
<td>945942</td>
<td>41.209716</td>
<td>-112.00304</td>
</tr>
</table>
I'm trying to do this with the following code:
var table = $('#tableHtml');
var value = $(table).find('tr').filter(function(){
return $(this).children('td').eq(2).text() == 4;
});
$('#GetValue').val(value);
Code in JSFidlle
Thanks!

You could do:
$('#GetValue').val($('#tableHtml td:nth-child(1):contains("4")').next().next().text());
jsFiddle example
Another option is:
var value = $('#tableHtml td:nth-child(1)').filter(function () {
return $(this).text() === '4';
}).next().next().text()
$('#GetValue').val(value);
jsFiddle example

var table = $('#tableHtml');
var value = $(table).find("tr").eq(4).find("td").eq(2).text();
$('#GetValue').val(value);

Pure CSS/HTML/Javascript 2D Scrollable table with fixed column and header

I have a large table which might need to scroll both horizontally and vertically. I have seen lots of solutions for this but haven't found one that works that doesn't rely on jscript or similar. It seems like it should be doable but I've come up with problems. I think I can get the header row ok, but I am having trouble with the fixed column. I can't seem to get my body to extend beyond the viewport and my code is rendering very differently on IE8 and Firefox.
Can anyone give me any guidance?
<html>
<head>
<script type="text/javascript">
function windowwidth(){
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myWidth = document.body.clientWidth;
}
return myWidth ;
}
function windowheight(){
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myHeight = document.body.clientHeight;
}
return myHeight ;
}
function pageloader(){
var leftwidth=document.getElementById('left').offsetWidth;
document.getElementById('right').style.marginLeft=leftwidth+'px';
}
</script>
<style>
div{ border:solid; }
.left{ position:absolute; }
.right{ position:float-left; margin-left:50px;}
table,td{ border:solid; }
td{ width:200px; }
tr{ height:50px; }
</style>
</head>
<body onload='pageloader();'>
<div name=left id=left class=left>
<table>
<tr><td>0</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</table>
</div>
<div name=right id=right class=right>
<table>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
</body>
</html>

I worked on it further though and came up with this solution. It works pretty well and is even pretty flexible. I think it's the best solution I've seen. Please let me know if you know of something better or know of a way to improve it.
The only thing I've found impossible to fix is the vertical-align which has to be top. Does anyone know of a decent, simple solution that makes IE8 respect vertical-align center for a td with a height?
Here is the demo: http://maymay.de/demos/table.html
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
function pageloader(){
// get sizes of boxes
var leftys=document.getElementById('left').getElementsByTagName('td');
var lefty=leftys[0];
var barys=document.getElementById('topbar').getElementsByTagName('td');
var bary=barys[0];
var boxys=document.getElementById('topleft').getElementsByTagName('td');
var boxy=boxys[0];
var leftwidth=lefty.offsetWidth;
var topheight=bary.offsetHeight;
var boxwidth=boxy.offsetWidth;
var boxheight=boxy.offsetHeight;
if(topheight>boxheight){
var newtopheight=topheight;
var newinnerheight=bary.clientHeight-parseInt(getStyle(bary, "padding-top"))-parseInt(getStyle(bary, "padding-bottom"));
}else{
var newtopheight=boxheight;
var newinnerheight=boxy.clientHeight-parseInt(getStyle(boxy, "padding-top"))-parseInt(getStyle(boxy, "padding-bottom"));
}
// set new width for left column
if(leftwidth>boxwidth){
var newleftwidth=leftwidth;
var newinnerwidth=lefty.clientWidth-parseInt(getStyle(lefty, "padding-left"))-parseInt(getStyle(lefty, "padding-right"));
}else{
var newleftwidth=boxwidth;
var newinnerwidth=boxy.clientWidth-parseInt(getStyle(boxy, "padding-left"))-parseInt(getStyle(boxy, "padding-right"));
}
// apply widths and heights and margins
// alert ("newleftwidth: "+newleftwidth+" newtopheight: "+newtopheight+"\nnewinnerheight: "+newinnerheight+" newinnerwidth: "+newinnerwidth);
boxy.style.height=newinnerheight+'px';
bary.style.height=newinnerheight+'px';
boxy.style.width=newinnerwidth+'px';
lefty.style.width=newinnerwidth+'px';
document.getElementById('left').style.marginTop=newtopheight+'px';
document.getElementById('topbar').style.marginLeft=newleftwidth+'px';
document.getElementById('right').style.marginLeft=newleftwidth+'px';
document.getElementById('right').style.marginTop=newtopheight+'px';
// fix column widths and rowheights
colsync();
rowsync();
calcright();
// alert ("leftwidth: "+newleftwidth+" topheight: "+newtopheight);
}
function scrolling(){
if (window.pageXoffset) {
var xscroll=window.pageXoffset;
} else if (document.body.scrollLeft) {
var xscroll=document.body.scrollLeft;
} else if (document.body.parentElement.scrollLeft) {
var xscroll=document.body.parentElement.scrollLeft;
} else if (document.body.parentNode.scrollLeft) {
var xscroll=document.body.parentNode.scrollLeft;
} else {
var xscroll=0;
}
if (window.pageYoffset) {
var yscroll=window.pageYOffset;
} else if (document.body.scrollTop) {
var yscroll=document.body.scrollTop;
} else if (document.body.parentElement.scrollTop) {
var yscroll=document.body.parentElement.scrollTop;
} else if (document.body.parentNode.scrollTop) {
var yscroll=document.body.parentNode.scrollTop;
} else {
var yscroll=0;
}
var leftwidth=document.getElementById('left').offsetWidth;
var topheight=document.getElementById('topbar').offsetHeight;
var newleftmargin=leftwidth-xscroll;
var newtopmargin=topheight-yscroll;
document.getElementById('left').style.top=-yscroll+'px';
document.getElementById('topbar').style.left=-xscroll+'px';
}
function info(){
}
function calcright(){
// resize page to shrink to fit
var rchildrenr = document.getElementById('right').getElementsByTagName('tr');
var rchildrend = rchildrenr[1].getElementsByTagName('td');
var rcols = rchildrend.length;
var rsum = 0;
for (i=0;i<rchildrend.length;i++) {
rsum = rchildrend[i].offsetWidth;
}
document.getElementById('topbar').style.width=rchildrenr[1].offsetWidth+'px';
document.getElementById('right').style.width=rchildrenr[1].offsetWidth+'px';
}
function colsync(){
var topcells = document.getElementById('topbar').getElementsByTagName('td');
var rightrows = document.getElementById('right').getElementsByTagName('tr');
var rightcells = rightrows[1].getElementsByTagName('td');
var mypads=0;
for (i=0;i<topcells.length;i++) {
if (topcells[i].offsetWidth>rightcells[i].offsetWidth) {
mypads=parseInt(getStyle(rightcells[i], "padding-left"))+parseInt(getStyle(rightcells[i], "padding-right"));
rightcells[i].style.width=topcells[i].clientWidth-mypads+'px';
}else{
mypads=parseInt(getStyle(topcells[i], "padding-left"))+parseInt(getStyle(topcells[i], "padding-right"));
topcells[i].style.width=rightcells[i].clientWidth-mypads+'px';
}
}
}
function rowsync(){
var leftcells = document.getElementById('left').getElementsByTagName('td');
var rightrows = document.getElementById('right').getElementsByTagName('tr');
var mypads=0;
for (i=0;i<leftcells.length;i++) {
rightcells=rightrows[i].getElementsByTagName('td');
if (leftcells[i].offsetHeight>rightcells[i].offsetHeight) {
mypads=parseInt(getStyle(rightcells[i], "padding-top"))+parseInt(getStyle(rightcells[i], "padding-bottom"));
rightcells[i].style.height=leftcells[i].clientHeight-mypads+'px';
// if (i==1) alert (leftcells[i].clientHeight);
}else{
mypads=parseInt(getStyle(leftcells[i], "padding-top"))+parseInt(getStyle(leftcells[i], "padding-bottom"));
leftcells[i].style.height=rightcells[i].clientHeight-mypads+'px';
// if (i==1) alert (leftcells[i].clientHeight);
}
}
}
window.onscroll = scrolling;
</script>
<style>
body{ margin:0; }
div{ border:none; }
.left{ position:fixed; background-color:White; z-index:0;}
.topleft{ position:fixed; background-color:White; z-index:1;}
.topbar{ position:fixed; background-color:White; width:1000000px; z-index:0;}
.right{ position:absolute; margin-left:50px; width:1000000px; z-index:-1;}
table{ border:none; border-spacing:0px;}
td{ border:solid; border-width:1px; width:5px; padding:2px; vertical-align:top; text-align:center;}
tr{ height:5px; }
</style>
</head>
<body onload='pageloader();'>
<div name=topleft id=topleft class=topleft onclick=info(); >
<table id=tabletable>
<tr><td>Fixed Block</td></tr>
</table>
</div>
<div name=left id=left class=left>
<table>
<tr><td>Row-0</td></tr>
<tr><td>Row-1</td></tr>
<tr><td>Row-2</td></tr>
<tr><td>Row-3</td></tr>
<tr><td>Row-4</td></tr>
<tr><td>Row-5</td></tr>
<tr><td>Row-6</td></tr>
<tr><td>Row-7</td></tr>
<tr><td>Row-8</td></tr>
<tr><td>Row-9</td></tr>
</table>
</div>
<div name=topbar id=topbar class=topbar>
<table>
<tr>
<td>Cola</td>
<td>Colb</td>
<td>Colc</td>
<td>Cold</td>
<td>Cole</td>
<td>Colf</td>
<td>Colg</td>
<td>Colh</td>
<td>Coli</td>
<td>Colj</td>
</tr>
</table>
</div>
<div name=right id=right class=right>
<table>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
<td>37</td>
<td>38</td>
<td>39</td>
</tr>
<tr>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
<td>47</td>
<td>48</td>
<td>49</td>
</tr>
<tr>
<td>50</td>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
<td>56</td>
<td>57</td>
<td>58</td>
<td>59</td>
</tr>
<tr>
<td>60</td>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
<td>66</td>
<td>67</td>
<td>68</td>
<td>69</td>
</tr>
<tr>
<td>70</td>
<td>71</td>
<td>72</td>
<td>73</td>
<td>74</td>
<td>75</td>
<td>76</td>
<td>77</td>
<td>78</td>
<td>79</td>
</tr>
<tr>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
<td>88</td>
<td>89</td>
</tr>
<tr>
<td>90</td>
<td>91</td>
<td>92</td>
<td>93</td>
<td>94</td>
<td>95</td>
<td>96</td>
<td>97</td>
<td>98</td>
<td>99</td>
</tr>
</table>
</div>
</body>
</html>

Categories

Resources