テーブルに行を動的に追加する

gridviewで行を選択し、gridviewから1つの数値を取得するとします。グリッドビューから8つの数値を取得した後、テキストボックス付きのHTMLテーブルに8行を追加する方法を考えてみましょう。それは可能であり、どのようにjquery .append（）と一緒に使用するのですか、事前に感謝します。テーブルに行を動的に追加する

出典

2016-12-14 sarode111

-1

<!DOCTYPE html> 
<html> 

<head> 
    <title>JS</title> 
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      $(".btn-add").on('click', function() { 
       var singleRow = $(".singleRow").eq(0).clone(); 

       singleRow.find('.btn-add') 
        .removeClass('btn-succcess') 
        .addClass('btn-danger') 
        .removeClass('btn-add') 
        .addClass('remove') 
        .html("X"); 

       singleRow.find('input').each(function(i, input) { 
        $(input).val(''); 
       }); 

       $("#wrapper").append(singleRow); 
      }); 

      $(document).on('click', ".remove", function() { 
       $(this).parent().remove(); 
      }); 

     }); 
    </script> 
    <style type="text/css"> 
     .singleRow { 
      padding: 10px 0; 
     } 
    </style> 
</head> 

<body> 
    <div class="container"> 
     <form role="form" autocomplete="off" id="wrapper"> 
      <div class="row singleRow"> 
       <div class="col-md-3"> 
        <input class="form-control" placeholder="Name" name="name" type="text" value="Dynamic Form Fields"> 
       </div> 
       <div class="col-md-3"> 
        <input class="form-control" placeholder="Phone No." name="phone" type="text" value="Dynamic Form Fields"> 
       </div> 
       <div class="col-md-1"> 
        <select class="form-control"> 
         <option>1</option> 
         <option>2</option> 
        </select> 
       </div> 
       <button type="button" class="btn btn-success btn-add"> 
        + 
       </button> 
      </div> 
      <!-- here it will append --> 
     </form> 
    </div> 
</body> 

</html>

出典

2016-12-14 06:32:18 HKC

私は質問を正しく理解しているかどうかはわかりませんが、はい、それはjqueryを使用すると非常に簡単です。スクリプトは次のようになります。

function appendTable(numberOfRows) { 
     var row = '<tr><td><input type="text" class="yourInput"></td></tr>'; //you should change this for your needs 
     for (var i = 0; i < numberOfRows; i++) { 
      $('#yourTable').append(row); 
     } 
    }

出典

2016-12-14 05:17:00

テーブルに行を動的に追加する

答えて

関連する問題