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。したがって、行をでtheadはなく、に追加しているため、セレクターは一致しませんtbody。

元の答え：

コメントで指摘しているように、CSSは、動的に追加されるかどうかに関係なく、関連するセレクターに一致するすべての要素にブラウザーによって適用されます。

successクラスが機能していないように見えることが問題である場合はtable、要素からクラスが欠落している可能性がありますtable（はい、本当に）。

ブートストラップの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 に答える