使用 jQuery 插入表格行答案

【问题标题】：Insert a Table Row using jQuery使用 jQuery 插入表格行
【发布时间】：2012-08-31 16:49:01
【问题描述】：

这是我的文凭项目，我想在开始时插入一行选择设备选择，但我不知道如何使用 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>

【问题讨论】：

查看 codecademy.com 的 jquery 教程，它们很棒，并且有课程可以教你如何做你想做的事
查看这里：stackoverflow.com/questions/317095/…

标签： javascript jquery

【解决方案1】：

我认为这就是您可能正在寻找的。这将在您的设备表中动态添加一个新行，并创建一个新的下拉列表，该下拉列表已被填充。

<!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>

您可以在此处查看更新的 JS Fiddle： http://jsfiddle.net/b3gYk/1/

【讨论】：

如果选择项目我想从数据库中获取数据...如何进行 php 编码...你能给我一些示例编码...tq 帮助我...
我将添加删除功能，但数据库工作确实是另一个问题。该站点适用于遇到问题的人，您需要先尝试一下，然后再显示您遇到问题的地方。否则，您的问题将像这个问题一样被否决。有很多数据库教程，特别是针对 php。 php.net 帮助/参考是最好的之一。也将不胜感激，因为我说过这个网站是为了指导而不是，请做我的工作。
我添加了删除行功能

【解决方案2】：

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

Here is a demo

【讨论】：