Добавление отдельного поиска столбца в строке seprate

Question

Я хочу добавить текстовые поля для поиска моих данных (что я сделал), но их положение находится в том же <Tr>, что и мои заголовки строк.

Как вы можете увидеть здесь:

Но я хочу, чтобы входы перейти на отдельной строке, так что они разделены так:

Мой код :

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

Как я могу достичь Это?

Answer 1

Вам нужно создать еще одну строку.

var ths = $('.table thead th'); 
 
var searchTr = $('<tr></tr>'); 
 
searchTr.insertAfter(ths.parents('tr')); 
 
searchTr.append(ths.map(function (i) { 
 
    var title = $(this).text(); 
 
    return $('<td><input type="text" placeholder="Search '+title+'" data-index="'+i+'" /></td>')[0]; 
 
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Header1</th><th>Header2</th><th>Header3</th><th>Header4</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th>Content1</th><th>Content2</th><th>Content3</th><th>Content4</th> 
 
    </tr> 
 
    </tbody> 
 
</table>