Javascript 错误DataTable:使用innerHTML时单个选择

在Datatable individual filter中，我得到一个单元格的值，如果该值等于某个文本（例如Tokyo），则应添加该值。但当我添加检查标签时，它会影响我的选择过滤器，因此选择无法找到值

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

JSFIDDLE：

HTML

脚本：

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

});

---

将选项附加到“选择”选项卡时，请尝试此操作

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

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

});

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