Javascript 在seprate行上添加单个列搜索

我想添加文本框来搜索我的数据表（我已经这样做了），但它们的位置与我的行标题相同

正如你在这里看到的：

但是我想把输入放在单独的行上，这样它们就可以像这样分开了：

我的代码：

if (!$.fn.DataTable.isDataTable('.table')) {
    $('.table thead th').each( function (i) {
        var title = $('.table thead th').eq( $(this).index() ).text();
        $(this).after('<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
    } );

    var table = $('.table').DataTable( {
        paging:         false
    } );


    $( table.table().container() ).on( 'keyup', 'thead input', function () {
        table
            .column( $(this).data('index') )
            .search( this.value )
            .draw();
    } );
}

if（！$.fn.DataTable.isDataTable（'.table'））{
$（'.table thead th'）。每个（函数（i）{
var title=$（'.table thead th'）.eq（$（this.index（））.text（）；
$（本）。在（''）之后；
} );
变量表=$（'.table'）。数据表（{
分页：false
} );
$（table.table（）.container（））.on（'keyup'，'thead input'，函数（）{
桌子
.column（$（this）.data（'index'））
.search（this.value）
.draw（）；
} );
}

---

如何实现这一点？

您需要创建另一行

var ths=$（'.table thead th'）；
var searchTr=$（''）；
searchTr.insertAfter（the.parents（'tr'））；
searchTr.append（th.map）（函数（i）{
var title=$（this.text（）；
返回美元（“”）[0]；
}));

校长1校长2校长3校长4
内容1内容2内容3内容4
您需要创建另一行


var ths=$（'.table thead th'）；
var searchTr=$（''）；
searchTr.insertAfter（the.parents（'tr'））；
searchTr.append（th.map）（函数（i）{
var title=$（this.text（）；
返回美元（“”）[0]；
}));

校长1校长2校长3校长4
内容1内容2内容3内容4