1

此行是在 ajax 调用之后添加的：

<tr id="product1" class = "success">
    <td>1</td>
    <td>product one</td>
</tr>

该类success为该行设置了绿色背景，但显然这种样式丢失了，因为该行是动态添加的。

我已经看到了通过动态加载 CSS 的解决方案，但我想知道如果您拥有一个广泛的样式表，哪种方法最有效。谢谢

我正在使用助推器：

        <table id = "table_result" class="table">
          <thead id ="table_result_search">
            <tr>
              <th>#</th>
              <th>Product</th>
              <th>Price</th>
              <th>Stock</th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>

和jQuery：

//ajax
var tr = TrTableResult(id,nombre, stock, price, n);
$("#table_result_search").append(tr);
//fin ajax
function TrTableResult(id,nombre,stock,price,n){
var color = new Array("success", "error", "warning", "info");
var tr = '<tr id ="'+id+'" class="' + color[n] + '">';  
  tr+= '<td>'+ id +'</td>';
  tr+= '<td>'+ product+'</td>';
  tr+= '<td>'+ price +'</td>'; 
  tr+= '<td>'+ stock +'</td>'; 
  tr+= '</tr>';
  return tr;
}
4

1 回答 1

8

更新答案：

现在您已经引用了您的标记和代码，很明显您确实有这个table类，所以下面的原始答案不是它。

但请注意，您将您的附加tr到您的thead元素：

$("#table_result_search").append(tr);

您的标记在哪里：

<thead id ="table_result_search">

您没有看到success课程的任何效果，因为规则是：

.table tbody tr.success > td {
  background-color: #dff0d8;
}

注意tbody里面的。所以选择器不匹配，因为您将该行附加到 a thead，而不是 a tbody。

原始答案：

正如我们中的一些人在评论中指出的那样，浏览器将 CSS 应用于与相关选择器匹配的所有元素，无论是否动态添加。

如果问题是success该类似乎不起作用，则可能是您的元素中缺少table该类table（是的，真的）。

bootstrap 的 CSS 中的规则是：

.table tbody tr.success > td {
  background-color: #dff0d8;
}

请注意，它以类选择器 ( .table) 开头，而不是标签选择器 ( table)。

因此，例如，此标记不会将这些样式应用于td此表中的 ：

<table>
  <tbody>
    <tr id="product1" class = "success">
      <td>1</td>
      <td>product one</td>
    </tr>
  </tbody>
</table>

实例| 资源

但是这个标记（唯一的变化是table标签）将：

<table class="table">
  <tbody>
    <tr id="product1" class = "success">
      <td>1</td>
      <td>product one</td>
    </tr>
  </tbody>
</table>

实例| 资源

于 2013-03-11T07:13:59.037 回答