Question

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

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

这是我的表

<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>

引导上下文类使用附加jQuery

1 个答案: