InnerHTMLの後にCSSを保持

Question

私はこのコードを持っています。私は、テーブルに行を挿入するためにJavaScriptを使用し、1つの行には1つのオプションがあります。

function myCreateFunction() { 
 
    var table = document.getElementById("customers2"); 
 
    var row = table.insertRow(1); 
 
    var cell1 = row.insertCell(0); 
 
    var cell2 = row.insertCell(1); 
 
    var cell3 = row.insertCell(2); 
 
    var cell4 = row.insertCell(3); 
 
    cell1.innerHTML = "<div class='form-group'><div class='col-md-6 col-xs-12'><select id='slc' name='slc' class='form-control select' data-live-search='true'><option value=''>-Test-</option></select></div></div>"; 
 
    cell2.innerHTML = "<input type='text' id='sl' name='sl[]' class='form-control' placeholder='Điền vào số lượng sản phẩm...' />"; 
 
    cell3.innerHTML = "<input type='text' id='g' name='g[]' class='form-control' placeholder='Điền vào giá bán sản phẩm...' />"; 
 
    cell4.innerHTML = "<input type='button' value='Delete' onclick='myDeleteFunction(this)' class='btn btn-danger'>"; 
 
}

<div class="panel-body"> 
 
    <table id="customers2" class="table datatable"> 
 
    <thead> 
 
     <tr> 
 
     <th>Tên sản phẩm </th> 
 
     <th>Số lượng</th> 
 
     <th>Giá bán</th> 
 
     <th>Xóa dòng</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <div class="form-group"> 
 
      <div class="col-md-6 col-xs-12"> 
 
       <select id="slc" name="slc" class="form-control select" data-live-search="true" onchange="customer_theo_enterprise(this.value);"> 
 
             <option value="">-Test option here-</option> 
 
             </select> 
 
      </div> 
 
      </div> 
 
     </td> 
 
     <td><input type="text" id="sl" name="sl[]" class="form-control" placeholder="Điền vào số lượng sản phẩm..." /></td> 
 
     <td><input type="text" id="g" name="g[]" class="form-control" placeholder="Điền vào giá bán sản phẩm..." /></td> 
 
     <td><input type="button" value="Delete" onclick="myDeleteFunction(this)" class="btn btn-danger"></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <input type="button" onclick="myCreateFunction()" value="Thêm dòng" class="btn btn-primary"> 
 
</div>

と次の行を追加それは私の問題だ、CSSを持っていません。

結果は次のとおりです。最初に新しく挿入された行にはCSSはありませんが、2番目の行にはCSSがあります。

Answer 1

あなたの質問は、明らかではないが、また、それは答えるために必要なすべての情報を提供していません。 しかし、あなたが達成しようとしていることを理解していれば、テーブル行に選択を生成するこのコードがあり、オプションに特定のテキスト色を付けることが問題です。 これは機能します。選択したオプションのスタイルを別の方法で変更する必要があると考えてください。

var table = document.getElementById("customers2"); 
 
      var row = table.insertRow(0); 
 
      var cell1 = row.insertCell(0); 
 
      cell1.innerHTML = "<div class='form-group'><div class='col-md-6 col-xs-12'><select id='slc1' name='slc1' class='form-control select' data-live-search='true' ><option value='check' style='color: #000;'>Click here</option><option value='check' style='color: #fff;'><option value='check' style='color: #888;'>Click here</option>Click here</option></select></div></div>"

<table id="customers2"> 
 

 
</table>