使用 jquery(.each() 函数计算表中特定行的数量) 也使用 .attr() 函数答案

【问题标题】：counting no of specific rows in a table using jquery(.each() function) also using .attr() function使用 jquery(.each() 函数计算表中特定行的数量) 也使用 .attr() 函数
【发布时间】：2015-09-15 21:37:54
【问题描述】：

我想使用 jQuery 中的 .each() 函数以及 .attr() 函数来显示表格的行数。我的代码如下：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery.js"></script>
    <script src="jquery.min.js"></script>
</head>
<body style="width: 290px; padding-left: 520px; padding-top: 155px;">
    <table id="mytable" border="1">
        <tr style="background-color: #DEB887" class="red"><td>1</td><td>Arun</td><td>B.Tech.</td><td>Sivakasi</td></tr>
        <tr style="background-color: ##F5F5DC" class="green"><td>2</td><td>Kumar</td><td>B.Com.</td><td>Madurai</td></tr>
        <tr style="background-color: #DEB887" class="red"><td>3</td><td>Rajesh</td><td>B.Sc.</td><td>Coimbatore</td></tr>
        <tr style="background-color: ##F5F5DC" class="green"><td>4</td><td>Gopinath</td><td>M.E.</td><td>Tirunelveli</td></tr>
        <tr style="background-color: #DEB887" class="red"><td>5</td><td>Deepak</td><td>M.Tech.</td><td>Chennai</td></tr>
        <tr style="background-color: ##F5F5DC" class="green"><td>6</td><td>Jerome</td><td>M.C.A.</td><td>Trichy</td></tr>
        <tr style="background-color: #DEB887" class="red"><td>7</td><td>Ashok</td><td>B.E.</td><td>Bangalore</td></tr>
        <tr style="background-color: ##F5F5DC" class="green"><td>8</td><td>Praveen</td><td>B.Tech.</td><td>Hyderabad</td></tr>
        <tr style="background-color: #DEB887" class="red"><td>9</td><td>Albert</td><td>B.B.A.</td><td>Tirupur</td></tr>
        <tr style="background-color: ##F5F5DC" class="green"><td>10</td><td>Jebastin</td><td>Ph.D.</td><td>Mumbai</td></tr>
        <tr style="background-color: ##F5F5DC" class="green"><td>11</td><td>Stephen</td><td>Ph.D.</td><td>Mumbai</td></tr>
    </table><br>
    <input type="button" value="Count for odd no colors" id="cnt" name="cnt" onclick="javascript:counting_values();">
</body>    
</html>


<script type="text/javascript">
    function counting_values()
    {
        $(function() {
          var red = 0 ,green = 0;
          $('#mytable tr').each( function() {
            if( $(this).attr('red',red) )
              red += 1;
            if( $(this).attr('green',green) )
              green += 1;
          });

          alert( 'Number of red rows:'+red );
          alert( 'Number of green rows:'+green );
        });
  }
</script>

我想使用 .attr() 函数显示 red & green classes 的行数。但它没有给我正确的输出。

如果我点击按钮，它应该显示“红色行数：5”和绿色行数：6”。但现在它显示“红色行数：11”和绿色行数：11”。这是表中的总记录数。

我的代码是否正确或有任何更改，请帮助我。

提前致谢。

【问题讨论】：

你的答案是可以接受的……抱歉投错了。

标签： javascript jquery

【解决方案1】：

只需设置两个计数器（红色和绿色）并检查 each 内部是否有红色或绿色类：

var red = 0;
var green = 0;
$('#mytable tr').each(function(){
   if ($(this).hasClass('red')) {
       red++;
   }
   if ($(this).hasClass('green')) {
       green++;
   }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/zoy4L2b5/

【讨论】：

简化代码可能有意义吗？ alert("红色" + $("#mytable tr.red").length); alert("Green" + $("#mytable tr.green").length);
@Sergey B.：是的，但这显然不是 OP 想要的。检查其他答案的所有 cmets。出于某种原因，他想要一个基于each 的解决方案，这是他无法控制的:)

【解决方案2】：

您不需要遍历行。您可以获取所有具有红色/蓝色类的对象以及.length 来查找它们的计数：

function counting_values(){
  alert($('#mytable .red').length);
  //and 
  alert($('#mytable .green').length);
}

更新：迭代表格元素并提醒其中的行：

function counting_values(){

 var redrows=0;
 var greenrows=0;

 $('#mytable').find('tr.red,tr.green').each(function(){
  $(this).is('.red') ? redrows++ : greenrows++;
 });

 alert(redrows);
 alert(greenrows);
}

【讨论】：

感谢您的回复，但我需要使用 .each() 函数@Miliand Anantwar
@Arun_Indian：你为什么要把解决方案复杂化？？
我的任务就是这样@Milind Anantwar
我已经完成了你给定的解决方案。但是他们希望使用 .each() 函数来获取它们。所以只有我在寻找另一种解决方案。
$(this).is('.red') ? redrows++ : greenrows++; 也会在没有课程（或蓝色课程，或其他）时增加绿行。

【解决方案3】：

FIDDLE

$('#cnt').click(function () {
    alert($('#mytable .red').length);
});

使用类作为选择器将选择该类的所有元素，您所要做的就是获取该类的长度

FIDDLE

$('#cnt').click(function () {
    //alert($('#mytable .red').length);
    var count = 0;
    $('#mytable .red').each(function(){
            count++
        });
    alert(count);
});

但我不认为这是一个好主意，代码越简单越好

【讨论】：

但是不能使用.each()函数吗？
@Arun_Indian 可以根据需要
但这怎么可能@Pekka
我知道这很复杂，但是客户的要求是这样的。所以只有我需要这个。无论如何，谢谢你的帮助
@Arun_Indian 你试过更新的小提琴了吗？我按照你想要的方式做了

【解决方案4】：

如前所述，最简单的方法是使用$('#mytable .red').length。

但可以肯定的是，您可以通过迭代表来使代码复杂化：

$(function() {
  var red = 0 ,
      green = 0;
  $('#mytable tr').each( function() {
    if( $(this).hasClass('red') )
      red++;
    if( $(this).hasClass('green') )
      green++;
  });

  alert( 'Number of red rows:'+red );
  alert( 'Number of green rows:'+green );
});

【讨论】：