我的html中有一个相对简单的数据表。我为每列定义了一个过滤器。通过在每个页脚单元格的输入字段内键入搜索词，表格将得到相应过滤。 对于我测试过的情况，过滤器本身似乎可以正常运行，但是在列过滤器中键入一个字符后，对过滤器输入框的焦点丢失了，并且出现以下错误：
未捕获的DOMException：无法在“节点”上执行“ appendChild”：要删除的节点不再是该节点的子级。也许它是在“模糊”事件处理程序中移动的？
最奇怪的部分：
仅当我的Chrome调试器打开时才会发生这种情况！
我已经在网上搜索了此类错误，但是所有解决方案均不适用于我的情况。尽管功能似乎还可以，但我不能忍受可能在我未涉及的情况下可能造成伤害的错误。我该如何解决这个问题？
$(document).ready(function() {
var table = $('#search_origins_table-id');
table.find('tfoot th').each(function() {
var title = $(this).text();
$(this).html("<input placeholder='Search " + title + "'/>")
});
table = table.DataTable({
dom: '<"top" li>lt<"bottom"i><"clear">',
lengthChange: false,
fixedHeader: {
footer: true
},
'iDisplayLength': -1
});
// Apply the search
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
that
.search(this.value)
.draw();
});
}); //todo
});.this_product_link {
background-color: lightgreen;
font-weight: bold;
font-style: italic
}<!DOCTYPE HTML>
<html lang="en">
<head>
<title>yyyyyy</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/fh-3.1.2/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/fh-3.1.2/datatables.min.js"></script>
</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>
Search origins:
<table class="display" id="search_origins_table-id">
<thead>
<tr>
<th>From product</th>
<th>To product</th>
<th>To site</th>
<th>To site id</th>
<th>Search term</th>
<th>When Saved</th>
<th>When Added</th>
</tr>
</thead>
<tfoot>
<tr>
<th>From product</th>
<th>To product</th>
<th>To site</th>
<th>To site id</th>
<th>Search term</th>
<th>When Saved</th>
<th>When Added</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><a target="_blank" href="/manage/product/342320/"> 342320</a></td>
<td><a class="this_product_link" target="_blank" href="/manage/product/185150/"> 185150</a></td>
<td>yyyy</td>
<td>6000</td>
<td>name;Braun Series 9 9290cc Men's Electric Foil Shaver</td>
<td>2018-10-27 20:05:47</td>
<td>2018-10-27 20:05:47</td>
</tr>
<tr>
<td><a class="this_product_link" target="_blank" href="/manage/product/185150/"> 185150</a></td>
<td><a target="_blank" href="/manage/product/286040/"> 286040</a></td>
<td>xxxx_yyyy</td>
<td>6002</td>
<td>name;Braun Series 3 3040 Shaver For Men </td>
<td>2018-10-25 12:45:32</td>
<td>2018-10-25 12:45:32</td>
</tr>
<tr>
<td><a class="this_product_link" target="_blank" href="/manage/product/185150/"> 185150</a></td>
<td><a target="_blank" href="/manage/product/10/"> 10</a></td>
<td>xxxx_yyyy</td>
<td>6002</td>
<td>name;Braun Series 3 3040 Shaver For Men </td>
<td>2018-10-25 12:41:47</td>
<td>2018-10-25 12:41:47</td>
</tr>
<tr>
<td><a class="this_product_link" target="_blank" href="/manage/product/185150/"> 185150</a></td>
<td><a target="_blank" href="/manage/product/608/"> 608</a></td>
<td>xxxx_yyyy</td>
<td>6002</td>
<td>name;Braun Series 3 3040 Shaver For Men </td>
<td>2018-10-25 12:40:04</td>
<td>2018-10-25 12:40:04</td>
</tr>
<tr>
<td><a class="this_product_link" target="_blank" href="/manage/product/185150/"> 185150</a></td>
<td><a target="_blank" href="/manage/product/607/"> 607</a></td>
<td>xxxx_yyyy</td>
<td>6002</td>
<td>name;Braun Series 3 3040 Shaver For Men </td>
<td>2018-10-25 12:40:03</td>
<td>2018-10-25 12:40:03</td>
</tr>
<tr>
<td><a class="this_product_link" target="_blank" href="/manage/product/185150/"> 185150</a></td>
<td><a target="_blank" href="/manage/product/606/"> 606</a></td>
<td>xxxx_yyyy</td>
<td>6002</td>
<td>name;Braun Series 3 3040 Shaver For Men </td>
<td>2018-10-25 12:40:02</td>
<td>2018-10-25 12:40:02</td>
</tr>
<tr>
<td><a class="this_product_link" target="_blank" href="/manage/product/185150/"> 185150</a></td>
<td><a target="_blank" href="/manage/product/605/"> 605</a></td>
<td>xxxx_yyyy</td>
<td>6002</td>
<td>name;Braun Series 3 3040 Shaver For Men </td>
<td>2018-10-25 12:40:01</td>
<td>2018-10-25 12:40:01</td>
</tr>
<tr>
<td><a target="_blank" href="/manage/product/605/"> 605</a></td>
<td><a class="this_product_link" target="_blank" href="/manage/product/185150/"> 185150</a></td>
<td>yyyy</td>
<td>6000</td>
<td>name;Braun Series 3 3040 Rechargeable Wet & Dry Electric Foil Shaver -- series 3 - 3040 wet & dry</td>
<td>2018-10-25 11:19:35</td>
<td>2018-10-25 01:06:13</td>
</tr>
<tr>
<td><a target="_blank" href="/manage/product/314628/"> 314628</a></td>
<td><a class="this_product_link" target="_blank" href="/manage/product/185150/"> 185150</a></td>
<td>yyyy</td>
<td>6000</td>
<td>name;Braun Series 7-740S-6 Wet & Dry Electric Foil Shaver</td>
<td>2018-10-18 18:08:58</td>
<td>2018-10-18 13:17:54</td>
</tr>
<tr>
<td><a target="_blank" href="/manage/product/10/"> 10</a></td>
<td><a class="this_product_link" target="_blank" href="/manage/product/185150/"> 185150</a></td>
<td>yyyy</td>
<td>6000</td>
<td>name;Braun Series 3 Proskin 3040S Wet & Dry Rechargeable Electric Shaver For Men</td>
<td>2018-10-24 16:25:53</td>
<td>2018-10-12 13:44:48</td>
</tr>
</tbody>
</table>
</body>
</html>
答案 0 :(得分：0)
此问题已通过根据updated datatables example for filtering columns更改javascript代码来解决：
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#search_origins_table-id thead tr').clone(true).appendTo('#search_origins_table-id thead');
$('#search_origins_table-id thead tr:eq(1) th').each(function (i) {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
$('input', this).on('keyup change', function () {
if (table.column(i).search() !== this.value) {
table
.column(i)
.search(this.value)
.draw();
}
});
});
var table = $('#search_origins_table-id').DataTable({
orderCellsTop: true,
fixedHeader: true
});
});