Question

我有html以下生成动态行，如下所示。

<html>
   <head>
      <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
      <script>
         $(document).ready(function() {
         var id = 0;
         // Add button functionality
         $("table.dynatable button.add").click(function() {
         id++;
         var master = $(this).parents("table.dynatable");
         // Get a new row based on the prototype row
         var prot = master.find(".prototype").clone();
         prot.attr("class", "")
         prot.find(".id").attr("value", id);
         master.find("tbody").append(prot);
         });
         // Remove button functionality
         $("table.dynatable button.remove").live("click", function() {
         $(this).parents("tr").remove();
         });
         });
      </script>
      <style>
         .dynatable {
         border: solid 1px #000;
         border-collapse: collapse;
         }
         .dynatable th,
         .dynatable td {
         border: solid 1px #000;
         padding: 2px 10px;
         width: 170px;
         text-align: center;
         }
         .dynatable .prototype {
         display:none;
         }
      </style>
   </head>
   <body>
      <table class="dynatable">
         <thead>
            <tr>
               <th>ID</th>
               <th>Name</th>
               <th>Col 3</th>
               <th>Col 4</th>
               <th><button class="add">Add</button></th>
            </tr>
         </thead>
         <tbody>
            <tr class="prototype">
               <td><input type="text" name="id[]" value="0" class="id" /></td>
               <td><input type="text" name="name[]" value="abc" /></td>
               <td><input type="text" name="col4[]" value="xyz" /></td>
               <td><input type="text" name="col3[]" value="sample" /></td>
               <td><button class="remove">Remove</button>
            </tr>
      </table>
   </body>
</html>

工作正常。但这里的价值已被硬编码。通常我从数据库中获取这些值，我可以使用jstl标签填充它。单击“添加”按钮，它会创建一行，但它会提供与第一行相同的值。

我的问题是是否可以重复使用同一行但没有填充任何值，以便用户可以键入新创建的行的值。

另外，如何在创建新行时分配唯一的ID和名称？在上面的代码中，id和名称是硬编码的。

Answer 1

尝试

var prot = master.find(".prototype").clone();
prot.attr("class", "")
prot.find(".id").attr("value", id);

prot.find(':text,:hidden,select,textarea').val('');
prot.find(':checkbox,:radio').prop('checked', false);

master.find("tbody").append(prot);

Answer 2

看一下这个演示.. Check Here

Ids显然是针对counter ...

动态生成的

var counter = 1;
jQuery('a.add-author').click(function(event){
alert("asdas");
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input style="width:200px" type="text" name="designation' +
counter + '"/></td><td><input style="width:200px" type="text" id="start_date'+ counter +'" name="start_date' +
        counter + '"/></td><td><input style="width:200px" id="end_date'+ counter +'" type="text" name="end_date' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);
    jQuery("#start_date"+ counter).datepicker();
    jQuery("#end_date"+ counter).datepicker();
 //$(".enddate").datepicker();
});

在html中为动态生成的行分配值？

2 个答案: