Question

在ajax调用后添加了这一行：

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

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

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

我正在使用boostrap：

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

Answer 1

更新回答：

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

但请注意，您已将tr追加到thead元素：

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

你的标记是：

<thead id ="table_result_search">

您没有看到success类的任何影响，因为规则是：

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

注意那里的tbody。因此，选择器不匹配，因为您要将行追加到thead，而不是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>

Live Example | Source

但是这个标记（只改为table标签）将：

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

Live Example | Source

使用jQuery动态添加数据后重新加载CSS的最有效方法是什么？

1 个答案: