Таблица и форма - добавяне на нови редове

[eddyy93]

Здравейте интерисуваме как да направя когато се натисне линк да се добавя нов ред в таблица и инпут полета с различни auto_increment ID за съответния ред в таблицата.

Използвам Jquery1.10 версия.

За момента съм направил това:

Направено е с bootstrap v2.3.2:

<form method="post" action="#" />
<table class="table table-bordered">
  
  <tr class="success">
    <td>#</td>
    <td>Вид</td>
    <td>предмет</td>      
    <td>Количество</td>
    <td>Ед. цена</td>    
  </tr>
  
  
  <tr class="success">
    <td>1</td>
    <td><input type="text" name="tp" /></td>    
    <td><input type="text" name="predmet" /></td>    
    <td><input type="text" name="kolichestsvo" /></td>
    <td><input type="text" name="edCena" /></td>
  </tr>
  
  
   <tr class="success">
    <td>2</td>
    <td><input type="text" name="tp" /></td>    
    <td><input type="text" name="predmet" /></td>    
    <td><input type="text" name="kolichestsvo" /></td>
    <td><input type="text" name="edCena" /></td>
  </tr>
  
</table>

</form>

 

[deam0n]

Записваш ID-то в един hidden input.
http://api.jquery.com/val/ - взимаш id-то от input-a.

http://api.jquery.com/click/ - за да задействаш функцията при натискане на линка.

http://api.jquery.com/html/ - записваш HTML съдържанието на тага table в променлива.

http://api.jquery.com/html/ - добавяш новите <tr><td></td></tr> с променливата от сесията което трябва да бъде id++ и ъпдейтваш и стойноста на инпута.

 

[eddyy93]

Благодаря, ето как реших проблема:

[js]
var counterx = 2;
var counter = 2;

$(document).ready(function() {
$("#addMoreRcpt").click(function() {
if (counterx > 10) {
alert("Only 10 reciepients are allowed");
return false;
}
var newTextBoxRow = $(document.createElement('tr')).attr("class", 'success success_' + counter);
newTextBoxRow.append("<td>"+counterx+"</td><td><input type=\"text\" name=\"tp_"+counterx+"\" /></td><td><input type=\"text\" name=\"kolichestsvo_"+counterx+"\" /></td><td><input type=\"text\" name=\"edCena_"+counterx+"\" /></td><td>5x2000.50</td>");
newTextBoxRow.appendTo("#RcptGroup");
counter++;
counterx++;
});
});
[/js]