javascript - jQuery 对输入进行排序

Question

我有一个包含数据的表格，需要使其可排序。排序后，每行需要更改其 tr id、input 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>