InnerHTML後保留CSS

我有這段代碼。我使用javascript向表中插入一行，並且一行內有一個選項。InnerHTML後保留CSS

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，但第二個有它。

來源

2017-06-21 Nguyên Nguyễn

你說的「失去的CSS」是什麼意思？ – Fabiano

你能解釋一下有什麼問題嗎？ – Manish

https://jsfiddle.net/f4p8vxn0/它應該工作。 – sjahan

你的問題不明確，另外，它沒有提供所有必要回答的信息。但是，如果我明白你要完成的是什麼，你的問題是你有這個代碼生成一個選擇到錶行，並且你希望這些選項有一個特定的文本顏色。它的工作原理，只要考慮選定的選項風格應該改變不同。

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>

來源

2017-06-21 08:22:02 Koop4

我剛更新了我的答案！ –

InnerHTML後保留CSS

回答

相關問題