Question

我正在使用以下代码通过jQuery创建HTML表：

    <script src="jquery-1.9.1.js"></script>
    <script>
        function createTable() {
            mytable = $('<table></table>').attr({ id: "basicTable" });
                var row = $('<tr></tr>').appendTo(mytable);
                $('<td></td>').text($('#drpEnter').val()).appendTo(row);
                $('<td></td>').text($('#txtAge').val()).appendTo(row);
            mytable.appendTo("#box");
            $('#drpEnter').val(0);
            return false;
        };
    </script>

这里“drpEnter”是一个下拉菜单，“txtAge”是一个文本框，“box”是asp.net中的一个div，你可以在这里看到：

    <div id="divTabl">
        Name:
        <asp:DropDownList ID="drpEnter" runat="server">
            <asp:ListItem Text="Hello" Value="Hello"></asp:ListItem>
            <asp:ListItem Text="Where" Value="Where"></asp:ListItem>
        </asp:DropDownList>
        <br />
        Age:
        <asp:TextBox runat="server" ID="txtAge"></asp:TextBox>
    </div>
    <asp:Button ID="btnclick" runat="server" OnClientClick="return createTable();" Text="Create Table" />
    <div id="box">
    </div>

我在点击按钮时调用了脚本功能，我的表工作正常并且每次点击都会更新。

现在我希望我的桌子应该有一个“编辑”和“删除”按钮，点击编辑按钮年龄应该显示在“txtAge”文本框中，用户可以从中编辑它，按钮点击表应该更新，删除按钮应删除特定行。谁能帮助我实现这个功能!!

Answer 1

我自己已经解决了我的问题，感谢大家没有回答，因为如果你们中的任何人都提供了答案，那么我自己也不会尝试这么多：）

这是解决方案：

    <script>
        $(document).ready(function () {
            $(document).on('click', '#btnedt', function() {
                debugger;
                $('#drpEnter').val($(this).closest('tr').find('td:eq(0)').text());
                $('#txtAge').val($(this).closest('tr').find('td:eq(1)').text());
            });
        });
    </script>

这里#btnedt是使用jquery创建的动态按钮，这个按钮将与每个新行一起生成，因此用于生成Table的更新代码如下：

    <script>
        function createTable() {
            mytable = $('<table></table>').attr({ id: "basicTable" });
            if ($('#txtEnter').val() != "") {
                var row = $('<tr></tr>').appendTo(mytable);
                $('<td></td>').text($('#drpEnter').val()).appendTo(row);
                $('<td></td>').text($('#txtAge').val()).appendTo(row);
                $('<td><input type="button" id="btnedt" value="Edit" /></td>').appendTo(row);
            }
            mytable.appendTo("#box");
            $('#drpEnter').val("");
            $('#txtAge').val("");
            return false;
        };
    </script>

我希望它能解决某人的问题。

使用JavaScript / jQuery在Tetbox中获取HTML表行以进行编辑

1 个答案: