如何从出现次数最多的表格中的特定列中找到数字，并根据出现次数最多的 10 个数字将它们显示在另一个表格的相应单元格中？
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);
});
这只是用每列中出现次数最多的数字发出警报。但我还需要第 2 最多、第 3 最多、第 4 最多等......每列的出现次数，并将数字显示在上表的相应单元格中。
【问题讨论】：
标签： javascript html-table find-occurrences
有多种方法可以做到这一点。为了让您更轻松，您可以使用lodash。 lodash 中的几个链式方法可能会为您解决这个问题。这实际上是一个在不使用 lodash 的情况下练习 js 技能的好问题。我建议您在问这里之前尝试提出解决方案。
【讨论】：
这是Demo。它还没有完全完成，但我已经完成了，现在可以看到 col1Array 包含每列的所有数据及其数量和出现次数。
现在您可以使用该数组 col1Array 并根据最大值对其进行排序，然后显示在您的表格中。
希望对你有帮助。
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);
});
希望对你有帮助！
【讨论】：
您可以使用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>【讨论】：
这可能是最短且万无一失的解决方案：
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;
});
});
演示： 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>【讨论】：