Insert a Table Row using jQuery

Question

This is my diploma project, and I want to insert a row at the start with a choose equipment select but I don't know how to use jQuery.

<form>
    <table border="1">
        <tr>
            <td>Kod Peralatan</td>
            <td>Nama Peralatan</td>
        </tr>
        <tr>
            <td>
                <select>
                    <option>Choose Equipment</option>
                </select>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <table>
        <tr>
            <td align="right">
                <button type="button">Add Row</button>
            </td>
        </tr>
    </table>
    </center>
</form>

check out the jquery tutorials at http://www.codecademy.com/ They are great and have lessons that teach you exactly how to do what you want to do — slayton, Aug 31 '12 at 16:52
Check here: http://stackoverflow.com/questions/317095/how-do-i-add-options-to-a-dropdownlist-using-jquery — Dom Vinyard, Aug 31 '12 at 16:54

score 0 · Answer 1 · answered Aug 31 '12 at 16:57

0

$("button").click(function() {
    $("select").append(new Option('Foo', 'foo', true, true));
});

Here is a demo

answered Aug 31 '12 at 16:57

Koerr

15,215
28
78
108

Scott · Accepted Answer · 2012-09-01T07:17:25.003

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/

if select item i want data from database...how to put php coding.. can you give me some example coding... tq for helping me... — user1639248, Sep 01 '12 at 06:46
I will add the remove functionality, but the database work is really another question. This site is for people that get stuck on questions, you need to make an attempt first and then show where you get stuck. Otherwise your question will be downvoted like this one has. There are lots of database tutorials especially for php. And the php.net help/reference is one of the best. Would appreciate an upvote too, as I said this site is for guidance not, please do my work. — Scott, Sep 01 '12 at 07:07

Insert a Table Row using jQuery

2 Answers2