javascript计算每个表行中类的出现次数，并在另一个表中进行汇总

javascript Count class occurrences per table row and summarize in another table

本文关键字：另一个计算 javascript 更新时间：2023-09-26

下表使用颜色代码标识成功和失败：绿色表示成功，红色表示失败。

<table>
    <thead>
        <th>mon</th>
        <th>tue</th>
        <th>Wed</th>
    </thead>
    <tbody>
        <tr>
            <td>Tom</td>
            <td class="miss"></td>
            <td class="hit"></td>
            <td class="miss"></td>
        </tr>
        <tr>
            <td>Dick</td>
            <td class="hit"></td>
            <td class="hit"></td>
            <td class="miss"></td>
        </tr>
        <tr>
            <td>Harry</td>
            <td class="miss"></td>
            <td class="miss"></td>
            <td class="hit"></td>
        </tr>
    </tbody>
</table>

下表总结了每个的成功和失败

<table id="summary">
    <thead>
        <th>Name</th>
        <th>Hits</th>
        <th>misses</th>
        <th>% compliance</th>
    </thead>
    <tbody>
        <tr>
            <td>Tom</td>
            <td id="success"></td>
            <td id="failed"></td>
            <td id="percentage"></td>
        </tr>
        <tr>
            <td>Dick</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Harry</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

下面的Javascript应该得到每个名称的类出现次数

$(function () {
    var $rows = $("#summary tbody tr");
    $rows.each(function (n) {
        $("#failed").html('<b>' + $('tr .miss').length + '</b>');
        $("#success").html('<b>' + $('tr .hit').length + '</b>  ');
        var total = $('.hit').length + $('.miss').length;
        var completed = $('.hit').length;
        var compliance = parseInt(completed * 100 / (total));
        $("#percentage").html('<b>' + compliance + ' % </b>');
    });
});

这是css

td.hit {
    background-color:#76F33A !important;
}
td.miss {
    background-color:#FF0F0F !important;
}

我想获取汇总表中每行的css类计数？

您不是根据行进行筛选，而是为整个表获取它们。

您的代码$('tr .miss').length需要是$(this).find('.miss').length，其中this是每个循环中的tr

就我个人而言，我会这样做：

$("#stats tbody tr").each( function(){  //get the rows
  var cells = $(this).find("td");  //get the cells
  var name = cells.eq(0).text();   //name
  var hit = cells.filter(".hit").length;  //count the hits
  var miss = cells.filter(".miss").length;  //count the misses
  var per = (hit / (hit + miss) * 100).toFixed(0);  //calc percentage of hits
  
  var row = "<tr><td>" + name + "</td><td>" + hit + "</td><td>" + miss + "</td><td>" + per + "</td></tr>";  //build row
  
  $("#summary tbody").append(row);  //add it to the new table
} );

.hit { background : green; }
.miss{ background : red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="stats">
  <thead>
    <th>Name</th>
    <th>mon</th>
    <th>tue</th>
    <th>Wed</th>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td class="miss">&nbsp;</td>
      <td class="hit">&nbsp;</td>
      <td class="miss">&nbsp;</td>
    </tr>
    <tr>
      <td>Dick</td>
      <td class="hit">&nbsp;</td>
      <td class="hit">&nbsp;</td>
      <td class="miss">&nbsp;</td>
    </tr>
    <tr>
      <td>Harry</td>
      <td class="miss">&nbsp;</td>
      <td class="miss">&nbsp;</td>
      <td class="hit">&nbsp;</td>
    </tr>
  </tbody>
</table>
<table id="summary">
  <thead>
    <th>Name</th>
    <th>Hits</th>
    <th>misses</th>
    <th>% compliance</th>
  </thead>
  <tbody>
  </tbody>
</table>

作为替代方案，制作一个包含值的简单对象：

var countByName = [];
$('tbody tr').each(function(){
    countByName.push({
        name: $(this).children().first().text(),
        hits: $(this).children('.hit').length,
        misses: $(this).children('.miss').length
    });
});

然后，您可以处理这些对象来创建摘要表。