Question

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

HTML CODE：

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

JQUERY CODE：

$(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>');
});

CSS代码：

tr.less {
  color:red;
}

（View it on 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>');
});

DEMO

Answer 2

它正确添加，但由于您没有任何带有文本的td，您无法看到它，使用开发人员工具并且您会看到它

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

试试这个：

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

Jquery根据条件附加类

5 个答案: