Question

我想在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>

我想显示红色＆amp;行的行数绿色类使用.attr（）函数。但它没有给我正确的输出。

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

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

提前致谢。

Answer 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/

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

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

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

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

使用jquery（.each（）函数）计算表中没有特定行也使用.attr（）函数

4 个答案: