Question

我需要编辑表tb中的数据当我点击编辑按钮编辑行文本框显示id，name，country 我需要显示国家/地区的下拉列表而不是文本框这是我的代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script>

        $(function () {
            $("#btn").click(function ()
            {
                var x = $("#txt1").val();
                var y = $("#txt2").val();
                var z = $("#mycountry").val();
                $("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "</td><td> <input type='button'class='c' value='Delete'/></td><td> <input type='button' class='d' value='Edit'/></td></tr>");


            });
            $("#tb").on("click", ".c", function () {
                //$(this).parent().parent().remove();
                $(this).closest('tr').remove();
            });
            $("#tb").on("click", ".d", function () {
               var row = $(this).closest('tr').toggleClass("editing");
               row.find("td").slice(0, 3).prop("contenteditable", row.hasClass("editing"));
            });
            $("#btndis").on('click', function () {
                $("body").append("<ul id='listNames''></ul>");
                $('#tb td:nth-child(2)').each(function () {
                    $("#listNames").append("<li>" + $(this).text() + "</li>")
                });
            });


        });
    </script>
    <style>
        .editing {
            background: yellow;
        }
    </style>
</head>
<body>
    <div>
        ID<input type="text" id="txt1" /><br />
        Name<input type="text" id="txt2" /><br />
        Country: <select id="mycountry">
    <option>---select---</option>
    <option>Egypt</option>
    <option>qatar</option>
    <option>saudia</option>
    <option>emarates</option>
</select><br />
        <input type="button" value="add" id="btn" />
        <input type="button" value="display" id="btndis" />

        <table>
            <thead>
                <tr>
                    <td>
                        ID
                    </td>
                    <td>
                        Name
                    </td>
                    <td>
                        Country
                    </td>
                    <td>
                </tr>
            </thead>
            <tbody id="tb"></tbody>
        </table>
    </div>
</body>
</html>

我使用此代码进行编辑

$("#tb").on("click", ".d", function () {
               var row = $(this).closest('tr').toggleClass("editing");
               row.find("td").slice(0, 3).prop("contenteditable", row.hasClass("editing"));
            });

如果我需要用国家/地区的下拉列表替换文本框

在表格下拉列表中单击编辑按钮后，没有为列国家生成

0 个答案: