2017-07-12 15 views
-2

これは関数のhtmlおよびjqueryコードです。最初の行が初期化されるので、今度は同じボタンで何回もボタンをクリックすると隠し行が呼び出されます。私は空のtbodyを作成し、それに新しい行を追加することをお勧めが、ここに私のコードは、これまでJQueryでonclickを使用してテーブルに非表示の行を挿入する方法

<!-- Jquery button click function --> 
 
    $(function() { 
 
     $('button').click(function() { 
 
      $('#other_tr').show() 
 
      var clone = $('#other_tr').clone; 
 
      $('#first_tr').after(clone) 
 
     }) 
 
    });
<html> 
 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <table> 
 
     <thead> 
 
      <tr id="first_tr"> 
 
\t \t \t  <th>Unit price</th> 
 
\t \t \t  <th>Discount</th> 
 
\t \t \t  <th>Total</th> 
 
\t \t \t </tr> 
 
      
 
      <!-- hidden row --> 
 
      <tr id="other_tr" style="display: none;"> 
 
\t \t \t  <th>Unit price</th> 
 
\t \t \t  <th>Discount</th> 
 
\t \t \t  <th>Total</th> 
 
\t \t \t </tr> 
 
     </thead> 
 
    </table> 
 
    <button>Fetch Row</button> 
 
</body> 
 
</html>

答えて

0

私は、これはあなたが後にしている何だと思います。

$(function() { 
 
    $('button').click(function() { 
 
    var clone = $('#other_tr').clone(); 
 
    $('table thead').append(clone); 
 
    clone.show(); 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr id="first_tr"> 
 
     <th>Unit price</th> 
 
     <th>Discount</th> 
 
     <th>Total</th> 
 
    </tr> 
 

 
    <!-- hidden row --> 
 
    <tr id="other_tr" style="display: none;"> 
 
     <th>Unit price</th> 
 
     <th>Discount</th> 
 
     <th>Total</th> 
 
    </tr> 
 
    </thead> 
 
</table> 
 
<button>Fetch Row</button>

0

<!-- Jquery button click function --> 
 
    $(function() { 
 
     $('button').click(function() { 
 
      $('#other_tr').show(); 
 
      var clone = $('#other_tr').clone(); 
 
      $('#first_tr').after(clone); 
 
     }) 
 
    });
<html> 
 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <table> 
 
     <thead> 
 
      <tr id="first_tr"> 
 
\t \t \t  <th>Unit price</th> 
 
\t \t \t  <th>Discount</th> 
 
\t \t \t  <th>Total</th> 
 
\t \t \t </tr> 
 
      
 
      <!-- hidden row --> 
 
      <tr id="other_tr" style="display: none;"> 
 
\t \t \t  <th>Unit price</th> 
 
\t \t \t  <th>Discount</th> 
 
\t \t \t  <th>Total</th> 
 
\t \t \t </tr> 
 
     </thead> 
 
    </table> 
 
    <button>Fetch Row</button> 
 
</body> 
 
</html>

0

私はあなたが、ページのロードにother_trを削除するには、IDが削除、および変数に格納示唆しています。

次に、その変数を毎回クローン

$(function() { 
 

 
    var $tr = $('#other_tr').detach().show().removeAttr('id'); 
 

 
    $('button').click(function() { 
 
    $('#first_tr').after($tr.clone()); 
 
    }); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr id="first_tr"> 
 
     <th>Unit price</th> 
 
     <th>Discount</th> 
 
     <th>Total</th> 
 
    </tr> 
 

 
    <!-- hidden row --> 
 
    <tr id="other_tr" style="display: none;"> 
 
     <th>Unit price</th> 
 
     <th>Discount</th> 
 
     <th>Total</th> 
 
    </tr> 
 
    </thead> 
 
</table> 
 
<button>Fetch Row</button>

関連する問題