动态添加表格中的行

假设我们选择gridview中的行，然后我们从gridview中获得一个数字。假设我们从gridview获得8个数字，然后如何在HTML表格中添加带有文本框的八行。是否有可能，以及它如何使用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

动态添加表格中的行

回答

相关问题