javascript - 在 InnerHTML 之后保留 CSS

Question

我有这个代码。我使用 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，但第二行有。

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>