CODEWITHSUNDEEP
javascriptjquery
edward
edward

Reputation: 87

Add a new row dynamically after clicking a button in jquery

I have to create a form which can dynamically adds rows after clicking a button, below is the code. So basically I want to clone the row with id="ADD" after clicking the btAdd button in the next row.

I don't know what to add inside the append function? I have tried a few things but its not working. Thanks in advance.

$(document).ready(function(){
    $("#btAdd").click(function(){
        $("#ADD").append(" ");
    });
});

    </script>
</head>
<body>
    <h1></h1>
    <div id = "myDiv">
        <form name="form1">
            <table border='1' width='700' align="center" cellpadding='5' cellspacing='10'>
                <tr>
                    <th>Place configuration here</th>
                </tr>
                <tr>
                    <td>Server Url: <input type="text" name="surl" id="surl"></td>
                </tr>
                <tr>
                    <td>            
                        Filter Name: <input type="text" name="fname"id="fname">
                        Filter Type
                        <select name="operation">
                            <option value="text">Text</option>
                            <option value = "List">List</option>
                        </select>
                    </td>
                </tr>
                <tr id="ADD">
                    <td>
                        Filter Options: <input type="text" name="foptions"id="foptions">
                        <input type="button" name="ADDb" value="+" id="btAdd">
                    </td>
                </tr>
                <tr>
                    <td>
                        Filter Label: <input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
                    </td>
                </tr>
                <tr>
                    <td><input type="button" name="submitb" id="submitb" value="Submit"></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

Upvotes: 1

Views: 3340

Answers (3)

jingyinggong
jingyinggong

Reputation: 646

<!DOCTYPE HTML>
<html>
<head>
    <style>
    #myDiv { margin: 0 auto; width: 800px; }
    .tr { clear: both; border: 1px solid #ccc; margin: 0 0 10px; padding: 5px; overflow: hidden; }
    .tr .label { float: left; width: 115px; }
    .tr .inputs { float: left; width: 230px; }
    .tr .btns { float: left; width: 100px; }
    .tr ul { margin: 0; padding: 0; }
    .tr li { list-style: none; }
    </style>
</head>
<body>
<div id = "myDiv">
    <form name="form1">
        <div class="tr">
            Place configuration here 
        </div>
        <div class="tr">
            Server Url:
            <input type="text" name="surl" id="surl">
        </div>
        <div class="tr">
            Filter Name:
            <input type="text" name="fname" id="fname">
            Filter Type
            <select name="operation">
                <option value="text">Text</option>
                <option value = "List">List</option>
            </select>
        </div>
        <div class="tr" id="ADD">
            <div class="label">Filter Options:</div>
            <ul class="inputs">
                <li>
                    <input type="text" name="foptions[]"> <input type="button" name="ADDb" value="+" id="btAdd">
                </li>
            </ul>
        </div>
        <div class="tr">
            Filter Label:
            <input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
        </div>
        <div class="tr">
            <input type="button" name="submitb" id="submitb" value="Submit">
        </div>
    </form>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
    var S = '<li><input type="text" name="foptions[]"> <input type="button" name="rm" value="-" /></li>',
        $ul = $('#ADD ul'), $add = $('#ADD');
    $add.on('click.add', '#btAdd', function() {
        $ul.append(S);
    });
    $add.on('click.rm', '[name=rm]', function() {
        $(this).closest('li').remove();
    });
});
</script>
</body>
</html>

Upvotes: 0

Nishan Senevirathna
Nishan Senevirathna

Reputation: 719

Try this

$("#btAdd").click(function(){
  $("#ADD").clone().attr("id","ADD_"+$("#table1 tbody").children("tr").length).insertAfter("#ADD");   
});

where table1 is the table id.

Upvotes: 1

Mohmmad Ebrahimi Aval
Mohmmad Ebrahimi Aval

Reputation: 482

try it:

$("#btAdd").click(function(){
    $("#ADD").clone().removeAttr("id").insertAfter("#ADD");
});

Upvotes: 3

Related Questions