jquery - Jquery根据条件追加类

Question

如果我的 var <100，我想向 tr 元素添加一个 .less 类number这是我到目前为止所做的，但它没有按预期工作。任何帮助，将不胜感激。

HTML 代码：

<table> 
   <thead>
       <tr> 
           <th>RESULT</th>
       </tr> 
   </thead> 
   <tbody>
   </tbody> 
</table>

查询代码：

$(document).ready(function(){
  var number = 80;
  if(number<100){
    $("tbody").append('<tr class="less">');
  }else{
    $("tbody").append('<tr>');
  }        
  $("tbody").append('<td>'+number+'</td>');
  $("tbody").append('</tr>');
});

代码：

tr.less {
  color:red;
}

（在codepen上查看）

Answer 1

您必须将您的附加td到新创建tr的，而不是tbody

$(document).ready(function(){
  var number = 80;
  if(number<100){
    $("tbody").append('<tr class="less" />');
  }else{
    $("tbody").append('<tr />');
  }        
  $("tbody tr").append('<td>'+number+'</td>');
});

演示

Answer 2

尝试这个：

$(document).ready(function(){
    $('<tr><td/></tr>').attr('class', number<100 ? 'less' : '').appendTo('tbody');
});

Answer 3

$().ready(function() {
  var appendTr = function(threshold) {
    var tr = $('<tr/>').appendTo('tbody');
    if(threshold < 100) {
      tr.addClass('less');
    }
    $('<td/>').appendTo(tr).text('' + threshold);
    return tr;
  };
  var tr = appendTr(80);
})

Answer 4

您正在尝试将结束标签附加到错误的元素..尝试这种方法..

$(document).ready(function(){
  var number = 80;

  $("tbody").append('<tr><td>'+number+'</td></tr>');
   if(number<100){
       $("tbody").find('tr:last').addClass('less')
  }
});​

Answer 5

它正确附加，但由于您没有任何td文本，因此您看不到它，使用开发人员工具，您会看到它