2017-02-09 2 views
0

У меня есть таблица, в которой с id 'filter' используется для создания текстового поля.введите тип текста для вставки в каждый tfoot

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
     </tr> 
     <tr id="filter"> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
     </tr> 
    </thead> 
</table> 

Я написал следующий код в JavaScript:

$('#example thead tr#filter th').each(function() { 
    var title = $('#example thead th').eq($(this).index()).text(); 
    $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
}); 

Но это не показывает textbox.Am я кодирования неправильно или сделал mistake.I не могу понять его.

ответ

0

попробовать это один:

Вы можете добавить функцию JQuery version 1.9.1 и использовать ready() чтобы функция доступна после загрузки документа:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
<script> 
    $(document).ready(function() { 
     $('#example thead tr#filter th').each(function() { 
      var title = $('#example thead th').eq($(this).index()).text(); 
      $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
     }); 
    }); 
</script> 

Demo here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $('#example thead tr#filter th').each(function() { 
 
      var title = $('#example thead th').eq($(this).index()).text(); 
 
      $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
 
     }); 
 
    }); 
 
    </script> 
 
    
 
    
 
</head> 
 
<body> 
 
<table id="example" class="display" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr> 
 
      <th>Name</th> 
 
      <th>Position</th> 
 
      <th>Office</th> 
 
      <th>Age</th> 
 
      <th>Start date</th> 
 
      <th>Salary</th> 
 
     </tr> 
 
     <tr id="filter"> 
 
      <th>Name</th> 
 
      <th>Position</th> 
 
      <th>Office</th> 
 
      <th>Age</th> 
 
      <th>Start date</th> 
 
      <th>Salary</th> 
 
     </tr> 
 
    </thead> 
 
</table> 
 
</body> 
 
</html>

+0

Я добавил JQuery library.But его до сих пор не работает. –

+0

вы можете увидеть My demo @shreyagupta –

+0

его тот же код, который я написал @Ivin Raj –

0

Вы должны включить библиотеку jQuery.

$('#example thead tr#filter th').each(function() { 
 
     var title = $('#example thead th').eq($(this).index()).text(); 
 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<table id="example" class="display" cellspacing="0" width="100%"> 
 
       <thead> 
 
        <tr> 
 
         <th>Name</th> 
 
         <th>Position</th> 
 
         <th>Office</th> 
 
         <th>Age</th> 
 
         <th>Start date</th> 
 
         <th>Salary</th> 
 
        </tr> 
 
        <tr id="filter"> 
 
         <th>Name</th> 
 
         <th>Position</th> 
 
         <th>Office</th> 
 
         <th>Age</th> 
 
         <th>Start date</th> 
 
         <th>Salary</th> 
 
        </tr> 
 
       </thead> 
 
     </table>

0

Вы можете отправить сообщение с прогнозом, вставив ссылку в HTML

<a href="mailto:[email]?subject=[subject]&body=[body]">Send Email</a> 
+0

Что это? @ пользователь683016 –

+0

что вы имеете в виду ?? – user683016

+0

Можете ли вы снова прочитать этот вопрос, пожалуйста, @ user683016 –

Смежные вопросы