javascript在每個錶行中計數類別事件並在另一個表格中進行彙總

Question

下表使用顏色代碼標識成功和失敗：綠色表示成功，紅色表示失敗。

<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類數？

Answer 1

您不是基於行篩選，而是抓取整個表。

您的代碼$('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>

Answer 2

作爲替代，使一個簡單的對象，其值爲：

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

然後您可以處理這些對象以創建您的彙總表。