Question

我正在动态填充表格。如果某个条件适用，我想在当前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，而不仅仅是其中一个。

Here is a fiddle

Answer 1

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

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

Fiddle Demo

请注意，提供给eq()的索引是从零开始的。因此，传递3将选择第四个元素。

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

一起使用

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

Fiddle Demo

Answer 2

我会试试这个：

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

Answer 3

将行创建为jQuery对象，以便对其进行引用。如果你的子句得到满足而不必再找到它，你可以简单地为它添加一个类。

EG：

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>

Answer 4

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

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

Answer 5

无需修改更多内容只需更换一件 find（'tbody 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");
 }
}

Answer 6

您可以通过在构造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的回答演示了当tr获胜时你如何通过索引选择特定:latest＆＃39; t help。

Answer 7

问题：$（'＃mytable'）。find（' 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/

将类添加到当前tr

7 个答案: