如何查找 table 列中出现的数字？

Question

如何找到 table 中特定列中出现次数最多的数字，并根据出现次数最多的 10 个数字将它们显示在另一个 table 的相应单元格中？

var col1Array = new Array();
$(document).ready(function() {
$('#stats tr td:nth-child(1)').each(function(i){
col1Array.push($(this).text());
});
alert(col1Array);
});

这只是用每列中出现次数最多的数字发出警报。但我还需要第二多，第三多，第四多等等。每列的出现次数，并将数字显示在上面 table 的相应单元格中。

Answer 1

有多种方法可以做到这一点。为了让您更轻松，您可以使用 lodash。 lodash 中的几个链式方法可能会为您解决这个问题。这实际上是一个很好的练习 js 技能而不使用 lodash 的问题。我建议你先想出解决办法再问这里。

Answer 2

这里是Demo。它还没有完全完成，但我已经完成了，现在可以看到 col1Array 包含每列的所有数据及其编号和出现次数。

现在您可以使用该数组 col1Array 并根据最大值对其进行排序，然后显示在您的 table.

希望对您有所帮助。

HTML

<table border="1" align="center" id="display">
<tr>
<th>Mode</th>
<th>Column&nbsp;1</th>
<th>Column&nbsp;2</th>
<th>Column&nbsp;3</th>
<th>Column&nbsp;4</th>
<th>Column&nbsp;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&nbsp;Most&nbsp;Occurring&nbsp;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&nbsp;1</th>
<th>Column&nbsp;2</th>
<th>Column&nbsp;3</th>
<th>Column&nbsp;4</th>
<th>Column&nbsp;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);
});

希望对您有所帮助！

Answer 3

您可以使用 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&nbsp;1</th>
    <th>Column&nbsp;2</th>
    <th>Column&nbsp;3</th>
    <th>Column&nbsp;4</th>
    <th>Column&nbsp;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&nbsp;Most&nbsp;Occurring&nbsp;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&nbsp;1</th>
    <th>Column&nbsp;2</th>
    <th>Column&nbsp;3</th>
    <th>Column&nbsp;4</th>
    <th>Column&nbsp;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>

Answer 4

这可能是最短且万无一失的解决方案：

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&nbsp;1</th>
        <th>Column&nbsp;2</th>
        <th>Column&nbsp;3</th>
        <th>Column&nbsp;4</th>
        <th>Column&nbsp;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&nbsp;Most&nbsp;Occurring&nbsp;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&nbsp;1</th>
        <th>Column&nbsp;2</th>
        <th>Column&nbsp;3</th>
        <th>Column&nbsp;4</th>
        <th>Column&nbsp;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>

如何查找 table 列中出现的数字？

How to find occurances of numbers in table columns?

javascript

html-table

find-occurrences