How to create and remove row dynamically using jquery - php

Question

This is my code
<table id="cont">
<tr>
<td><input type="text" name="no" id="no"/></td>
<td><input type="text" name="qty" id="qty"/></td>
</tr>
</table>
This is my jQuery Code
$(document).ready(function() {
var no="";
$('#no').keyup(function(){
no = $("#no").val();
for(var i=1; i<no; i++)
{
++j;
$('<tr class="field"><td></td><td><input name="qty[]" type="text" id="qty[0]" /></td></tr>').fadeIn('slow').appendTo('#cont');
}
});
if(i==1)
{
$('.field').remove();
}
});
I would like to create and remove row dynamically depending on an input field(no id) and it works fine upto 19 but if i input 20 then it create 20 with extra 1 row as well as i remove zero from 20 then it should be kept 2 rows but it display all rows(21).
How can i solve it , Please any help?

Answer 1

The main problem with your code is you only ever add rows. Here's a solution that provides a bit of timeout after keyup, then replaces all the rows. It's not entirely clear what your overall objective is with this UI.
Note that top row is wrapped in <thead> and <tbody> is used for data rows:
var row = '<tr class="field"><td>Row text</td><td><input name="qty[]" type="text" /></td></tr>';
var num_rows=0;
$('#no').keyup(function () {
num_rows= $(this).val();;
if (!isNaN(num_rows)) {/* make sure is a number, can add extra condition to limit number*/
setTimeout(createRows, 300);/* slight delay to give user time to type*/
} else {
alert('numbers only please')
}
});
function createRows(){
var rowHtml='';
for ( i=0;i<num_rows;i++){
rowHtml+=row;
}
$('#cont tbody').html( rowHtml)
}
Demo:http://jsfiddle.net/H4MHs/
EDIT: I suspect that this approach is completely off track from what you really want, but follows your methodology. Since objective was never spelled out that's all we can go on

Answer 2

You will probably want to convert the value from your field into an integer using parseInt before you use it in the loop.
I'm pretty sure jQuery's .val() will always return a string.

Answer 3

I have the feeling that this is what you need:
Html:
Number of field:<div id='nbElem'></div>
<table id="cont">
<tr>
<td><input type="text" name="no" id="no"/></td>
<td id='field'></td>
</tr>
</table>
Js:
$('#no').keyup(function(){
var $val = parseInt($(this).val(),10);
var $nbQtity = $('.qtity').length;
if($val <= $nbQtity){
for(var i = $val; i < $nbQtity; i++){
$('#q_'+i).remove();
}
}else{
for(var i = $nbQtity; i < $val; i++){
$('<input name="qty[]" class="qtity"'
+' type="text" id="q_'+i+'" />')
.fadeIn('slow')
.appendTo('#field');
}
}
$('#nbElem').text($val);
});
http://jsfiddle.net/pYtbs/

Answer 4

This is the simplest and the easiest way of adding rows
<table id="options-table">
<tbody>
<tr>
<td>Input-Box-One</td>
<td>Input-Box-Two</td>
<td></td>
</tr>
<tr>
<td><input type="text" name="input_box_one[]" /></td>
<td><input type="text" name="input_box_one[]" /></td>
<td><input class="del" type="button" value="Delete" /></td>
</tr>
<tr>
<td><input type="text" name="input_box_one[]" /></td>
<td><input type="text" name="input_box_one[]" /></td>
<td><input class="add" type="button" value="Add More" /></td>
</tr>
</tbody>
If we want more rows then we have to add new row to the table.
Put this code in script
$('.add').live('click',function(){
$(this).val('Delete');
$(this).attr('class','del');
var appendTxt = "<tr><td><input type="text" name="input_box_one[]" /></td><td><input type="text" name="input_box_two[]" /></td><td><input class="add" type="button" value="Add More" /></td></tr>";
$("tr:last").after(appendTxt); });
Delete a row from Table.
$('.del').live('click',function(){
$(this).parent().parent().remove(); });