将类添加到当前tr

Add class to current tr

本文关键字：tr 添加      更新时间：2024-04-02

我正在动态填充一个表。如果某个条件适用，我想在当前tr:中添加一个类

number = 3;
for (i = 0; i < 5; i++) {
  var row = "";
  row += "<tr><td>Test" + i + "</td></tr>"
  $('#mytable').find('tbody:last').append(row);
  if (i == number) {
    $('#mytable').find('tbody:last').addClass("red");
  }
}

不幸的是，该类被添加到所有tr中，而不仅仅是其中的一个。

这是一把小提琴。

您可以使用.eq()或:eq()选择器

$('#mytable tbody tr').eq(number).addClass('red');

Fiddle演示

注意，提供给eq()的索引是基于零的。因此，通过3将选择第四个元素。

循环i中的计数器也可以与条件运算符一起使用

row += "<tr" + (i === number ? ' class="red"' : '') + "><td>Test" + i + "</td></tr>"
//              ^^ ================================ ^^

Fiddle演示

我会试试这个：

number = 3;    
for (i = 0; i < 5; i++) {
  var row = $('<tr>');
  if (i == number) row.addClass('red');
  row.append($('<td>').html('Test'+i));
  $('#mytable').find('tbody:last').append(row);
}

将行创建为jQuery对象，这样您就可以对其进行引用。然后，如果满足您的子句，您可以简单地向其中添加一个类，而不必再次查找它。

例如：

var number = 3;
var $tbody = $('#mytable');
for (i = 0; i < 5; i++) {    
    var $row = $("<tr><td>Test"+i+"</td></tr>");// create the row as a jquery object so we have a reference to it    
    $tbody.append($row);// append it to the table   
    if (i == number) {// if your clause is met
        $row.addClass("red");// add a classname
    }
}
.red {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
</table>

$('#mytable tbody:last tr:last').addClass("red");

这将选择最后一个tr，并仅将类添加到最后一个tr（您刚刚附加的）

无需对此进行更多修改，只需替换一个find（'body-tr:last'），请在下面找到代码

number = 3;
for (i = 0; i < 5; i++) {
 var row = "";
 row += "<tr><td>Test" + i + "</td></tr>"
 $('#mytable').find('tbody:last').append(row);
 if (i == number) {
   $('#mytable').find('tbody tr:last').addClass("red");
 }
}

您可以通过在构建HTML:时直接添加一个类来避免完全使用addClass()

for (i = 0; i < 5; i++) {
  var row = "";
  var rowClass = (i == number) ? " class='red' " : "";
  row += "<tr"+rowClass+"><td>Test" + i + "</td></tr>"
  $('#mytable').find('tbody:last').append(row);
}

https://jsfiddle.net/0k9fazum/

否则，正如Pointy所指出的，你应该选择tr而不是tbody，Tushar的回答表明，当:latest没有帮助时，你可以如何通过索引选择特定的tr。

问题：$（'#mytable'）.fund（'tbody:last'）.addClass（"red"）
解决方案：$（'#mytable'）.find（'tbody-tr:last'）.addClass（"red"）；

 number = 3;
    for (i = 0; i < 5; i++) {
      var row = "";
      row += "<tr><td>Test" + i + "</td></tr>"
      $('#mytable').find('tbody:last').append(row);
      if (i == number) {  
        $('#mytable').find('tbody tr:last').addClass("red");
      }
    }

https://jsfiddle.net/shadiq_aust/Lan0fv36/4/

相关文章：