入力タイプ - 各tfootに挿入するテキスト

私は、 'filter'というidを持つテーブルを使ってテキストボックスを作成しています。入力タイプ - 各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+'" />'); 
});

をしかし、それは私が間違ってそれをコーディングまたはmistake.Iがそれを把握することはできません行わtextbox.Amを示していません。

出典

2017-02-09 shreya gupta

は、このいずれかを試してみてください。

あなたは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>

出典

2017-02-09 10:50:03

をこのリンクを挿入することによって、Outlookからメールを送信することができます。 –

あなたは私のデモを見ることができます@shreyagupta –

私が書いた同じコード@Ivin Raj –

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>

出典

2017-02-09 10:50:53

あなたは、私はそのまだ機能していないlibrary.But jqueryのを追加してHTML

に

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

出典

2017-02-09 10:52:05 user683016

これは何ですか？ @ user683016 –

あなたはどういう意味ですか？ – user683016

この質問をもう一度読むことができますか？@ user683016 –

入力タイプ - 各tfootに挿入するテキスト

答えて

関連する問題