Question

我有这个代码。我使用javascript向表中插入一行，并且其中一行包含一个选项。

＆＃13;

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'>";
}

＆＃13;

<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>

＆＃13;

下一个添加的行没有CSS，这是我的问题。

结果如下。第一个刚插入的行没有任何CSS，但第二行有它。

Answer 1

您的问题并不清楚，也没有提供回答所需的全部信息。但是，如果我理解了您要完成的任务，那么您的问题就是您拥有生成select into table行的代码，并且您希望选项具有特定的文本颜色。它可以工作，只考虑所选的选项样式应该有不同的改变。

＆＃13;

for (HtmlListItem node: nodes) {
    NodeList children = node.getChildNodes();
    for (int i = 0; i < children.getLength(); i++) {
       Node child = children.item(i);
       /** extract data from child **/
    }       
}

＆＃13;

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>"

＆＃13;

在InnerHTML之后保留CSS

1 个答案: