錯誤DataTable：使用innerHTML時的個別選擇

Question

在Datatable個別過濾器中，我獲取單元格的值，如果該值等於某些文本（例如東京），則應添加檢查。但是當我添加檢查標籤時，它會影響我的選擇過濾器，因此選擇無法找到值東京。

此外，我使用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; 
} 

SCRIPT：

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