Working with jQuery add row button click - jQuery AJAX PHP

Question

I'm trying to call a text box (or a set of div with input fields) with a button click (id: add_row)

The below code works for the first time, but not the second time.

In other words - the add button works and brings the text box for the first time, not the second time. I need the add button to work for 'n' times.

Also is it possible to give dynamic value for input name (ie percent0, percent1, addr0 and addr1) so that i can post the values to the next page.

Thanks, Kimz

Partial Code

    <script src="jquery-1.11.0.min.js"></script>    
    <script type="text/javascript">
        $(document).ready(function(){
            $("#add_row").click(function(){
            $("#addr1").show();
        });
    });
    </script>

HTML Code

<table>
    <tr id='addr0'>
        <td><input type="text" name='percent0'  placeholder='Percentage' /></td>
    </tr>
    <tr id='addr1' style="display:none">
        <td><input type="text" name='percent1'  placeholder='Percentage' /></td>
    </tr>
</table>

<a id="add_row" class="btn btn-default pull-left">Add Percentage</a>        

Here is the full code(JSFIDDLE): http://jsfiddle.net/4mP9U/1/

Answer 1

that because you are just showing row on button click. if you need to add more row than clone that row and append it to table.

$(document).ready(function () {
    $("#add_row").click(function () {
        var tr = $("#addr1").clone().show();
        jQuery('table').append(tr);
    });
});

DEMO

EDITED

For unique ID of row and textbox

HTML

<table>
    <tr id='addr0'>
        <td>
            <input type="text" name='percent0' placeholder='Percentage' />
        </td>
    </tr>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Percentage</a>

javascript code

$(document).ready(function () {
    $("#add_row").click(function () {
        var table = jQuery('table');
        var row =  jQuery('tr',table).length;
        var row_id = 'addr'+row;
        var tr = $("#addr0").clone().attr('id',row_id);

        tr.find('input').attr('id','parent'+row);
        jQuery('table').append(tr);
    });
});

DEMO

Answer 2

If you need to add numerous rows to your table, you should create a template, then clone it each time the button is pressed.

http://jsfiddle.net/A8Kyf/

HTML:

<table id="container">
    <tr id='addr_template' style="display:none">
        <td>
            <input type="text" name='percent' placeholder='Percentage' />
        </td>
    </tr>
    <tr id='addr0'>
        <td>
            <input type="text" name='percent0' placeholder='Percentage' />
        </td>
    </tr>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Percentage</a> 

JS:

$(document).ready(function () {
    var counter = 1;
    $("#add_row").click(function () {
        new_elem = $("#addr_template").clone().appendTo("#container tbody").show().attr("id", "addr" + counter);
        counter += 1;
    });
});

Answer 3

If you want to achieve this , use this HTML:

<table id="myTable">
    <tr id='addr0'>
        <td><input type="text" name='percent0'  placeholder='Percentage 0' /></td>
    </tr>
</table>

<a id="add_row" class="btn btn-default pull-left">Add Percentage</a>

And this JavaScript code:

$("#add_row").click(function(){
    var rowCount = $('#myTable tr').length;
    $('#myTable tr:last').after('<tr id="addr'+rowCount+'"><td><input type="text" name="percent'+rowCount+'"  placeholder="Percentage '+rowCount+'" /></td></tr>');
});

Answer 4

Currently you are showing a row with display:none .

You can create a row each time your button is pressed.

Demo : JSFiddle

JS

$(document).ready(function () {
    $(document).on("click", "#add_row", function () {
        var txt = $("input[name=percent0]").clone();
        txt.attr("name", "percent" + $("input[name^=percent]").length);
        var row = $("<tr/>");
        row.attr("id", "addr" + $("tr[id^=addr]").length);
        var cell = $("<td/>");
        cell.html(txt);
        row.append(cell);
        $("table").append(row);
    }); 
});