为html中动态生成的行赋值

Assigning values to dynamically generated row in html?

本文关键字：赋值 html 动态      更新时间：2023-09-26

我有下面的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和名称是硬编码的。

看看这个演示。。检查此处

CCD_ 1相对于CCD_。。。

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();
});

尝试

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);
相关文章：