jQuery 排序输入

Question

我有一个包含数据的表格，需要对其进行排序。排序后每一行需要改变它的 tr id，输入 id 和 name 属性。

这里我只为name 属性做了这件事。但是在保存数据时，如果进行了 1 次以上的排序，这些行仍然是不按顺序排列的。可能我错过了一些东西。

有没有办法一次更改所有这些属性？

    $( "#languages > tbody" ).sortable({
        items: 'tr',
        update: function(event, ui) {
            var result = $('#languages > tbody').sortable('toArray');
            for(i=0; i<result.length; i++) {
                $('#Setting3Value'+i+'Language').attr('name', 'data[Setting][3][value]['+result[i]+'][language]');
            }
            for(i=0; i<result.length; i++) {
                $('#'+i).attr('id', result[i]);
                $('#Setting3Value'+i+'Language').attr('id', 'Setting3Value'+result[i]+'Language');
            }
        }
    });

还有 HTML：

<table id="languages">
    <tbody>
                                        <tr id="0">
                        <td><div class="input text"><input type="text" id="Setting3Value0Language" rel="" value="English" name="data[Setting][3][value][0][language]"/></div></td>
                        <td><div class="input text"><input type="text" id="Setting3Value0Alias" rel="" value="eng" name="data[Setting][3][value][0][alias]"/></div></td>
                        <td/>
                    </tr>
                                        <tr id="1">
                        <td><div class="input text"><input type="text" id="Setting3Value3Language" rel="" value="French" name="data[Setting][3][value][1][language]"/></div></td>
                        <td><div class="input text"><input type="text" id="Setting3Value1Alias" rel="" value="fre" name="data[Setting][3][value][1][alias]"/></div></td>
                        <td/>
                    </tr>
 <!-- and so on ... -->
    </tbody>
</table>

也可以将表行的id 设置为name-1，例如。 ?

编辑：我设法通过使用id 的临时值来完成我需要的工作，因为它变得非常混乱。我不认为这是最好的解决方案，所以很期待。还需要列出每个输入。

这是我的更新功能：

            for(i=0; i<result.length; i++) {
                $('#'+result[i]).attr('id', 'temp-'+i);
                $('#Setting3Value'+result[i]+'Language').attr('id', 'temp-Setting3Value'+i+'Language');
                $('#Setting3Value'+result[i]+'Alias').attr('id', 'temp-Setting3Value'+i+'Alias');
            }

            for(i=0; i<result.length; i++) {
                $('#temp-'+i).attr('id', i);
                $('#temp-Setting3Value'+i+'Language').attr('id', 'Setting3Value'+i+'Language');
                $('#temp-Setting3Value'+i+'Alias').attr('id', 'Setting3Value'+i+'Alias');

                $('#Setting3Value'+i+'Language').attr('name', 'data[Setting][3][value]['+i+'][language]');
                $('#Setting3Value'+i+'Alias').attr('name', 'data[Setting][3][value]['+i+'][alias]');
            }

Answer 1

排序HTML元素，你有没有尝试过以下 jQuery插件http://tinysort.sjeiti.com/

我已将此与 JQuery UI 可排序结合使用。这是一个非常强大且有用的库，可以按特定属性对元素进行排序。

希望这会有所帮助。

编辑：（在可排序容器内移动项目时更新 tr id）

<script type ="text/javascript">
    $(function () {
        $("#languages > tbody").sortable({
            stop: function (e, ui) {
                $(this).children("tr").each(function () {
                    $(this).attr("id", $(this).index());
                });
            }
        });
    });
</script>