Javascript 在jQuery中重新排序表单数组的聪明、高效的方法？

我的网页上有一个项目列表，用户可以从中动态添加和删除。每个项目都类似于此：

<tr id="LELOC_0">
    <td>
        <label title="" for="LE">
            Legal Entity:</label>
        <input type="text" value="0" name="CAS.LERoles[0].LE" id="CAS_LERoles_0__LE" data-val-required="The Legal Entity field is required."
            data-val-number="The field Legal Entity must be a number." data-val="true" class="tinyText">
        <br>
        <label title="" for="LOC">
            Location:</label>
        <input type="text" value="0" name="CAS.LERoles[0].LOC" id="CAS_LERoles_0__LOC" data-val-required="The Location field is required."
            data-val-number="The field Location must be a number." data-val="true" class="tinyText">
    </td>
    <td>
        <label title="" for="APMasterRole">
            AP Master Role:</label>
        <select name="CAS.LERoles[0].APMasterRole" id="CAS_LERoles_0__APMasterRole">
            <option value="0" title="">None</option>
            <option value="1" title="">LBK</option>
            <option value="2" title="">General Manager</option>
            <option value="3" title="">Publisher</option>
            <option value="4" title="">RAM</option>
            <option value="5" title="">District Manager</option>
            <option value="6" title="">Corp0</option>
            <option value="7" title="">Corp1</option>
            <option value="8" title="">Corp2</option>
        </select>
        <br>
        <label title="" for="WebPortalRole">
            Web Portal Role:</label>
        <select name="CAS.LERoles[0].WebPortalRole" id="CAS_LERoles_0__WebPortalRole">
            <option value="0" title="">None</option>
            <option value="1" title="">Admin</option>
            <option value="2" title="">LBK</option>
            <option value="3" title="">PUB</option>
            <option value="4" title="">Security</option>
            <option value="5" title="">RAM</option>
            <option value="6" title="">CAS</option>
            <option value="7" title="">Site Data Entry</option>
        </select>
        <br>
        <label title="" for="AnyViewIDSRole">
            AnyView IDS Role:</label>
        <select name="CAS.LERoles[0].AnyViewIDSRole" id="CAS_LERoles_0__AnyViewIDSRole">
            <option value="0" title="">None</option>
            <option value="1" title="">Administrators</option>
            <option value="2" title="">All Access</option>
            <option value="3" title="">CORP</option>
            <option value="4" title="">GL</option>
            <option value="5" title="">LBK</option>
            <option value="6" title="">Other</option>
            <option value="7" title="">PUB</option>
            <option value="8" title="">RBK</option>
            <option value="9" title="">RM</option>
        </select>
    </td>
    <td>
        <label title="" for="APMasterPurchaseApprover">
            AP Master Approver:</label>
        <input type="text" value="" name="CAS.LERoles[0].APMasterPurchaseApprover" id="CAS_LERoles_0__APMasterPurchaseApprover"
            data-val-requiredif-operator="EqualTo" data-val-requiredif-dependentvalue="LBK"
            data-val-requiredif-dependentproperty="APMasterRole" data-val-requiredif="If the user is in the AP Master LBK role, the AP Master Purchase Approver must be provided."
            data-val="true" class="smallText">
        <br>
        <label title="" for="WebPortalPurchaseApprover">
            Web Portal Approver:</label>
        <input type="text" value="" name="CAS.LERoles[0].WebPortalPurchaseApprover" id="CAS_LERoles_0__WebPortalPurchaseApprover"
            data-val-requiredif-operator="EqualTo" data-val-requiredif-dependentvalue="LBK"
            data-val-requiredif-dependentproperty="WebPortalRole" data-val-requiredif="If the user is in the Web Portal LBK role, the Web Portal Purchase Approver must be provided."
            data-val="true" class="smallText">
    </td>
    <td>
        <button class="deleteButton" id="btnDelete_0" type="button">
            Delete</button>
        <button class="addButton" id="btnAdd_0" type="button">
            Add</button>
    </td>
</tr>

法人实体：


地点：
AP主机角色：
没有一个
LBK
总经理
出版商
内存
地区经理
Corp0
Corp1
Corp2


网站门户角色：
没有一个
管理
LBK
酒吧
安全
内存
中科院
站点数据输入


AnyView ID角色：
没有一个
管理员
所有访问
公司
德国劳埃德船级社
LBK
另外
酒吧
RBK
RM
应付账款主审批人：


门户网站审批人：
删去
添加

---

诀窍是，如果用户删除了该项目，我希望对列表重新排序，以便在发回服务器时，序列号中没有空白。我的第一个想法是循环所有的

元素，并用正则表达式匹配/替换序列号，但这看起来非常混乱。所以我想知道，有没有一种漂亮的javascript/jQuery方法可以简化这个过程？否则，我可能只会说“去他妈的”，并检查服务器端是否有缺失的序列。

在表单发布之前，您可以轻松地遍历所有TR元素并更新id属性

var newValue = "LELOC_";
$("tr").each(function(i, row) {
   $(row).attr("id", newValue + i);
});

---

在表单提交之前执行此操作，会将它们全部更改为按顺序排列。

页面中的顺序号是否可编辑？ 如果没有，只需省略它们，并仅在保存时生成它们

function generateItemsToSave() {
    var itemsToSave = [];
    jQuery('tr').each(function(pos, el) {
        var locData = {
          id: 'LELOC_' + itemsToSave.length,
          //Build rest of locData from el
        };
        itemsToSave.push(locData);
    });
    return itemsToSave;
}
saveItems(generateItemsToSave());

---

行ID没有表单输入名称那么令人担忧。这同样适用于每行的内容。只需找到子元素并更新它们的属性即可。否则，只需在服务器端处理表单时设置值。不幸的是，它们是。。。我需要能够键入特定的行。我可能会使用属性

，然后通过

locref

引用它们，而不是依赖于id号（特别是如果预期id会更改）。这样，您就可以在页面中访问它们的方式和随后保存它们的方式之间断开连接，同时仍然可以在页面中操作它们。