[Solved] Insert a Table Row using jQuery

by


I think this is what you may be looking for.
This will dynamically add a new row to your equipment table, and create a new drop down list, which is populated.

<!DOCTYPE html>
<html>
<head>
    <title>Equipment</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        var rows = 0;
        function addMoreEquipment() {
            rows++;
            var options = [{ name: "Item 1", value: "1" }, { name: "Item 2", value: "2" }, { name: "Item 3", value: "3" }];
            var row = $("<tr id='row"+ rows +"'><td><select id='equipment" + rows + "'></select></td><td><a href="#" onclick='removeRow(\"row" + rows + "\")'>Remove</a></td></tr>")
            $("#equipment").append(row);
            for (var i = 0; i < options.length; i++)
                $("#equipment" + rows).append(new Option(options[i].name, options[i].value));
        }
        function removeRow(id) {
             $("#" + id).remove();
        }
        $(document).ready(function() {
            addMoreEquipment();
        });
    </script>
</head>
<body>
    <form>
        <table border="1" id="equipment">
            <tr>
                <td>Kod Peralatan</td>
                <td>Nama Peralatan</td>
            </tr>
        </table>
        <div style="text-align: right">
            <input type="button" onclick="addMoreEquipment()" value="Add Row">
        </div>    
    </form>
</body>
</html>

You can check out the updated JS Fiddle here:
http://jsfiddle.net/b3gYk/1/

3

solved Insert a Table Row using jQuery