jQuery UI Sortable无法与动态表一起使用

Question

我正在动态创建一个表并尝试使每一行（tr）都可排序。 我关注了jQuery UI网站上的各种文档，并认为自己理解了。 但是，我似乎不太清楚。

我哪里做错了？ 谢谢！

 <!doctype HTML>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link href="css/bootstrap-form-helpers.min.css" rel="stylesheet" media="screen">
    <link href="jquery-ui.css" type="text/css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript>" href="jquery-ui.js"></script>
    <script type="text/javascript" href="bootstrap-2.2.2.min.js"></script>

    <script>
        $(function() {
            $( "tr" ).sortable();
            $( "tr" ).disableSelection();
        });
    </script>

    </head>
    <body>
    <div class="center">
    <form id="agenda_form">
        <p>Session Title</p>
        <input type="text" id="session_title">
        <p>Start Time<p>
        <input type="number" id="start_time">
        <p>End Time</p>
        <input type="number" id="end_time">
        <input type="submit" value="Submit" id="submit_form">
    </form>
    <table class="table-striped">
        <tr>
            <td>Session Title</td>
            <td>Start Time</td>
            <td>End Time</td>
        </tr>
    </table>
    </div>

    <script type="text/javascript">
        $("#submit_form").click(function (event) {
            event.preventDefault();
            var $tr = $('<tr />');
            $tr.append($("<td />", { text: $("#session_title").val()} ))
            $tr.append($("<td />", { text: $("#start_time").val()} ))
            $tr.append($("<td />", { text: $("#end_time").val()} ))
            $tr.appendTo("table");
            $("#agenda_form").each(function (){
                this.reset();
            });
        });
    </script>
    </body>
    </html>

Answer 1

您需要在您的jquery选择中使用tbody而不是tr。 我还建议将标题设置为theader块--- http://jsfiddle.net/rcottkqx/1/

<div class="center">
<form id="agenda_form">
    <p>Session Title</p>
    <input type="text" id="session_title">
    <p>Start Time
        <p>
            <input type="number" id="start_time">
            <p>End Time</p>
            <input type="number" id="end_time">
            <input type="submit" value="Submit" id="submit_form">
</form>
<table class="table-striped">
    <thead>
        <th>Session Title</th>
        <th>Start Time</th>
        <th>End Time</th>
    </thead>
</table>

$("#submit_form").click(function (event) {
    event.preventDefault();
    var $tr = $('<tr class="t" />');
    $tr.append($("<td />", {
        text: $("#session_title").val()
    }));
    $tr.append($("<td />", {
        text: $("#start_time").val()
    }));
    $tr.append($("<td />", {
        text: $("#end_time").val()
    }));
    $tr.appendTo("table");
    $("#agenda_form").each(function () {
        this.reset();
    });
    $("tbody").sortable();
    $("tbody").disableSelection();
});

jQuery UI Sortable无法与动态表一起使用

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-01 23:53:46

jQuery UI Sortable无法与动态表一起使用

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-01 23:53:46

解决方案1
1 已采纳 2015-03-01 23:53:46