Назначение значений динамически генерируемой строке в html?

У меня ниже html, который генерирует динамические строки, как показано ниже.Назначение значений динамически генерируемой строке в 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. При нажатии кнопки «Добавить» создается строка, но она дает те же значения, что и в первой строке.

Вопрос в том, можно ли повторно использовать ту же строку, но без каких-либо значений, заполненных ею, чтобы пользователь мог вводить значения для вновь созданной строки.

Также, как я могу назначить уникальные идентификаторы и имена при создании новой строки? в вышеописанном идентификаторе кода и именах жестко закодированы.

источник

2013-08-06 user1016403

отступа кода. Тогда, возможно, я прочитаю его и попытаюсь помочь. До свидания. – Rolf

Посмотрите на это демо .. 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(); 
});

источник

2013-08-06 11:49:41

Попробуйте

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

источник

2013-08-06 11:32:21

Arun, Thanx для ответа ур. Если повторное использование одного и того же tr, то каждый компонент строки будет иметь одинаковый идентификатор и имя. Как я могу назначить уникальный идентификатор и имя для вновь созданной строки? Благодаря! – user1016403

вам не нужно использовать 'id' здесь, предпочитайте 'class'' 'в этой ситуации –

По крайней мере, мне нужно использовать уникальные имена? так что я могу получить входное значение в сервлет, используя request.getParameter («uniqueName»); – user1016403

Назначение значений динамически генерируемой строке в html?

ответ

Смежные вопросы