在 InnerHTML 之后保留 CSS答案

【问题标题】：Keep CSS After InnerHTML在 InnerHTML 之后保留 CSS
【发布时间】：2017-06-21 08:09:37
【问题描述】：

我有这个代码。我使用javascript在表格中插入一行，其中一行有一个选项。

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

【问题讨论】：

“丢失的 CSS”是什么意思？
你能解释一下是什么问题吗？
jsfiddle.net/f4p8vxn0 它应该可以工作。
例如我的css颜色是红色的。在 innerHTML 之后它不是红色的
你需要添加你的css代码然后..也许选择器不同

标签： javascript jquery html css innerhtml

【解决方案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>

【讨论】：