javascript - 错误数据表 : Individual Select When Using innerHTML

Question

在数据表单个过滤器中，我获取单元格的值，如果该值等于某些文本(例如东京)，则应添加已检查。但是，当我添加检查标签时，它会影响我的选择过滤器，因此选择无法找到值 Tokyo。

此外，我使用 innerText 获取单元格的值，并使用 innerHTML 获取 innerText 值和带有检查文本的标签。

JSFIDDLE:https://jsfiddle.net/aice09/Lkbk4d3p/

HTML

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>2009/09/15</td>
      <td>$205,500</td>
    </tr>
  </tbody>
</table>

CSS /* 数据表 Tfoot*/

tfoot input {
  width: 100%;
}

tfoot {
  display: table-header-group;
}

脚本:

const tablexxx = document.getElementById('example');
const rows = tablexxx.querySelectorAll('tbody tr');

rows.forEach((row) => {
  const cells = row.getElementsByTagName('td');
  const office = cells[2].innerText;

  var inspectedtext = '<br><span class="label label-success"><span class="fa fa-info-circle"></span> INSPECTED</span>';


  if (office === "Tokyo") {
    cells[2].innerHTML = office.concat(inspectedtext);
  } else {
    cells[2].innerHTML = office;
  }
});

$('#example tfoot th').each(function() {
  var title = $(this).text();
  $(this).html('<input class="form-control" type="text" placeholder="Search ' + title + '" style="width:100%" />');
});

// DataTable
var table = $('#example').DataTable();

// Apply the search
table.columns().every(function() {
  var that = this;

  $('input', this.footer()).on('keyup change', function() {
    if (that.search() !== this.value) {
      that
        .search(this.value)
        .draw();
    }
  });
});

table.column(2).every(function() {

  var column = this;
  var select = $('<select class="form-control" style="width:100%"><option value=""></option></select>')
    .appendTo($(column.footer()).empty())
    .on('change', function() {
      var val = $.fn.dataTable.util.escapeRegex(
        $(this).val()
      );

      column
        .search(val ? '^' + val + '$' : '', true, false)
        .draw();
    });

  column.data().unique().sort().each(function(d, j) {
    select.append('<option value="' + d + '">' + d + '</option>')
  });

});

Answer 1

将选项附加到选择时尝试此操作。

column.data().unique().sort().each(function(d, j) {
    var $div = $("<div/>").html(d);
    var val = $div.text();
    var txt = $div[0].childNodes[0].nodeValue;
    select.append('<option value="' + val + '">' + txt + '</option>')
});