Question

我有一个以前的HTML代码。

 <table width="600px" cellspacing="0" border="1" id="mainTable">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    full Name
                </th>
                <th>
                    Type
                </th>
            </tr>
            <tr>
                <td>
                    <input id="11" type="text" />
                </td>
                <td>
                    <input id="12" type="text" />
                </td>
                <td>

                    <select id="13">
                    </select>
                </td>
            </tr>
        </table>
        <input type="button" onclick="return btnAddRow_onclick()"/>

我想要jquery函数，它将添加带有html元素和新id的行。例如，点击后，将添加：

<tr>
                <td>
                    <input id="21" type="text" />
                </td>
                <td>
                    <input id="22" type="text" />
                </td>
                <td>

                    <select id="22">
                    </select>
                </td>
            </tr>

Answer 1

像

这样的东西

<script>
    $(function(){
        var currentID = 1;

        $("#btn1").click(function(){
            currentID ++;
            var htmlToAppend = "<tr><td><input id='txt" + currentID + "1' type='text' /></td><input id='txt" + currentID + "2' type='text' /></td><td><select id='cmb" + currentID + "3'></select></td></tr>";
            $("#mainTable").append ( htmlToAppend );

        });
});
</script>
<table width="600px" cellspacing="0" border="1" id="mainTable">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    full Name
                </th>
                <th>
                    Type
                </th>
            </tr>
            <tr>
                <td>
                    <input id="txt11" type="text" />
                </td>
                <td>
                    <input id="txt12" type="text" />
                </td>
                <td>

                    <select id="cmb13">
                    </select>
                </td>
            </tr>
        </table>
        <input type="button" id="btn1" value="Click me" />

使用动态添加行到html表

1 个答案: