jQuery排序输入

jQuery sorting inputs

本文关键字：输入 排序 jQuery      更新时间：2023-09-26

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

EDIT:我设法通过使用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]');
            }

对HTML元素进行排序，您尝试过以下操作吗JQuery插件http://tinysort.sjeiti.com/

我已经将此与JQueryUI排序表结合使用。它是一个非常强大和有用的库，可以按特定属性对元素进行排序。

希望这能有所帮助。

编辑：（更新可分拣集装箱内移动物品的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>
相关文章：