我有以下代码（附加代码段）：
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>
Exact matches overview
</title>
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<script type="text/javascript" src="/static/script/site_filter.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/>
<script type="text/javascript"
src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.13/sorting/natural.js"></script>
<style type="text/css">
tfoot {
display: table-header-group;
}
html {
width: 58%;
}
.red_background {
background-color: #ffe4e9 !important;
}
.red_bold_font {
font-weight: bolder;
color: red;
}
</style>
</head>
<body>
<img id="loader" src="/static/img/loader_animation_large.gif"
style="
width:36px;
height:36px;
display: none;
position:absolute;
top:50%;
left:50%;
margin-top:-18px;
margin-left:-18px;"/>
<p><a href="/accounts/logout/">Logout</a> | <a href="/accounts/profile/">Home</a></p>
<div id="title">
<b style="font-size:200%">Exact matches overview<br></b>
</div>
<table id='matches_table-id' class="display" cellspacing="0" style="float: left;">
<thead>
<tr>
<th>Date</th>
<th>Customer name</th>
<th>Customer SKU count</th>
<th>Competitor name</th>
<th>Total matches</th>
<th>Total matches 2 weeks ago</th>
<th>Matches diff</th>
<th>Coverage (%)</th>
<th>Coverage 2 weeks ago (%)</th>
<th>Coverage diff (%)</th>
<th>Competitor benchmark coverage (%)</th>
<th>Benchmark coverage diff (%)</th>
<th>violated</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Date</th>
<th>Customer name</th>
<th>Customer SKU count</th>
<th>Competitor name</th>
<th>Total matches</th>
<th>Total matches 2 weeks ago</th>
<th>Matches diff</th>
<th>Coverage (%)</th>
<th>Coverage 2 weeks ago (%)</th>
<th>Coverage diff (%)</th>
<th>Competitor benchmark coverage (%)</th>
<th>Benchmark coverage diff (%)</th>
<th>violated</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><span>2017-02-20 00:00</span></td>
<td><span>bestonix (-104)</span></td>
<td><span>2461</span></td>
<td><span>target.com (-106)</span></td>
<td><span>517</span></td>
<td><span>625</span></td>
<td><span>-108</span></td>
<td><span>21.0%</span></td>
<td><span>34.4%</span></td>
<td><span>-13.4%</span></td>
<td><span>60.0%</span></td>
<td><span>-39.0%</span></td>
<!-- initialize invisible "violated" column -->
<td><span>not</span></td>
</tr>
<tr>
<td><span>2017-02-20 00:00</span></td>
<td><span>bestonix (-104)</span></td>
<td><span>2461</span></td>
<td><span>walmart.com (-105)</span></td>
<td><span>1052</span></td>
<td><span>1014</span></td>
<td><span>38</span></td>
<td><span>42.7%</span></td>
<td><span>55.7%</span></td>
<td><span>-13.0%</span></td>
<td><span>60.0%</span></td>
<td><span>-17.3%</span></td>
<!-- initialize invisible "violated" column -->
<td><span>not</span></td>
</tr>
<tr>
<td><span>2017-02-20 00:00</span></td>
<td><span>bestonix (-104)</span></td>
<td><span>2461</span></td>
<td><span>amazon_bestonix (278)</span></td>
<td><span>1347</span></td>
<td><span>1309</span></td>
<td><span>38</span></td>
<td><span>54.7%</span></td>
<td><span>72.0%</span></td>
<td><span>-17.2%</span></td>
<td><span>60.0%</span></td>
<td><span>-5.3%</span></td>
<!-- initialize invisible "violated" column -->
<td><span>not</span></td>
</tr>
</tbody>
</table>
<div style="clear: both"></div>
<script>
$(document).ready(function () {
var BENCHMARK_DIFF_COL = 11;
var COVERAGE_COL = 7;
var COVERAGE_DIFF_COL = 9;
var VIOLATED_COL = 12;
// Setup column search - add a text input to each footer cell
$('#matches_table-id tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Filter " style="width: 50px"' + " />");
});
// DataTable
var table = $('#matches_table-id').DataTable({
//conditional formatting
createdRow: function (row, data, index) {
if (parseFloat($(data[BENCHMARK_DIFF_COL]).text()) < parseFloat(-20)) {
$(row).addClass("red_background");
$(row).find('td:eq(' + BENCHMARK_DIFF_COL + ')').addClass("red_bold_font");
$(row).find('td:eq(' + VIOLATED_COL + ')').html("<span>violated</span>");
}
if (parseFloat($(data[COVERAGE_COL]).text()) < parseFloat(10)) {
$(row).addClass("red_background");
$(row).find('td:eq(' + COVERAGE_COL + ')').addClass("red_bold_font");
$(row).find('td:eq(' + VIOLATED_COL + ')').html("<span>violated</span>");
}
if (parseFloat($(data[COVERAGE_DIFF_COL]).text()) < parseFloat(-15)) {
$(row).addClass("red_background");
$(row).find('td:eq(' + COVERAGE_DIFF_COL + ')').addClass("red_bold_font");
$(row).find('td:eq(' + VIOLATED_COL + ')').html("<span>violated</span>");
}
},
//disable ordered column style class change on sorting
"orderClasses": false,
dom: 'l Brtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]]
})
;
// 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();
}
});
});
});
</script>
</body>
</html>
如您所见，我正在根据其他列中的值更改最后一列的值。
问题：修改此列中的值后，搜索不再按预期运行。
似乎搜索的行为就像我从未改变过这些单元格中的值并且看到之前的＆＃34;默认＆＃34;来自html表初始化的值。
我尝试使用<span>标记包装和解包新值，但没有成功解决问题。
我在这里错过了什么？