如何在表格列中查找数字的出现？

时间：2015-10-08 09:22:29

标签： javascript html-table find-occurrences

如何在具有最高出现率的表格中找到特定列的数字，并根据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);
});

这只会发出警告，其中每列的出现次数最多。但是我还需要第二个，第三个，第四个最多等...每个列的出现数量，并且数字显示在上表的相应单元格中。

4 个答案:

答案 0 :(得分：1)

有很多方法可以做到这一点。为了方便您，您可以使用lodash。 lodash中的几个链式方法可能会为您解决这个问题。在不使用lodash的情况下练习你的js技能实际上是一个很好的问题。我建议你在问这里之前尝试提出解决方案。

答案 1 :(得分：1)

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

现在您可以使用该数组col1Array并按最大值对其进行排序，然后显示在您的表中。

希望这会对你有所帮助。

<强> 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);
});

希望这会对你有帮助！

答案 2 :(得分：1)

您可以使用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>

答案 3 :(得分：0)

这可能是最短且最简单的解决方案：

$("#messages").load("<%= j render @messages%>");

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;
    });
});

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;
}

相关问题
最新问题