Gardez CSS après InnerHTML

Question

J'ai ce code. J'utilise javascript pour insérer une ligne dans la table, et une ligne a une option à l'intérieur.

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>

Et la ligne suivante ajoutée n'a pas CSS, c'est mon problème.

Voici le résultat. La première ligne fraîchement insérée n'a pas de CSS, mais la seconde l'a.

Answer 1

Votre question n'est pas clair, aussi, ce n'est pas fournir toutes les informations nécessaires pour répondre. Cependant, si j'ai compris ce que vous essayez d'accomplir, votre problème est que vous avez ce code qui génère une ligne select into table, et que vous voulez que les options aient une certaine couleur de texte. Cela fonctionne, il suffit de considérer que le style d'option sélectionné doit être modifié différemment.

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>