javascript - Bootstrap 上下文类不能与附加 jQuery 一起使用

Question

我正在使用append将tr和td添加到我的表格中，但是当我向表格行添加颜色时，上下文类不起作用，但其他类例如col-md- 与追加完美配合，但上下文类不起作用。

如何添加上下文类并附加到我的表中？

这是我的 table

<table class="table table-bordered">
    <thead>
    <tr class="info">
        <th>Row</th>
        <th>Score</th>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>

这是我的 js 代码:

for(var i=0 ; i<array.length ; i++){
     //the class in tr dose't work 
     $('#tbody').append('<tr class="success">');
     $('#tbody').append("<td>"+ (i+1) +"</td>"); 
     $('#tbody').append('<td>'+array[i].score.toFixed(2)+'</td>');
     $('#tbody').append('</tr>');
}

这是Jsfiddle结果

Answer 1

您不能这样附加:您附加的 HTML 字符串必须格式正确。 第一个追加将添加 <tr class="success"></tr> ;对于第二个和第三个，浏览器将添加新的 <tr></tr> .

具体操作方法如下:

var array = [{ score: 1.0 }, { score: 2.0 } ];

for (var i = 0; i < array.length; i++) {
  //the class in tr dose't work 
  $('#tbody').append(
    '<tr class="success">'
    + "<td>" + (i + 1) + "</td>" 
    + '<td>' + array[i].score.toFixed(2) + '</td>'
    + '</tr>'
  );
}

.success { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr class="info">
      <th>Row</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody id="tbody">

  </tbody>
</table>