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>

诀窍是，如果用户删除了该项目，我想对列表进行重新排序，以便在发回到服务器上时，序列号之间没有空格。我对此的第一个想法是循环遍历所有<tr>元素，然后使用正则表达式匹配/替换序列号，但这似乎很混乱。所以我想知道，有没有一种漂亮的javascript / jQuery方法可以简化这一过程？否则，我可能只说“拧紧它”并检查服务器端是否缺少序列。

最佳答案

可编辑的页面中的序列号是否相关？
如果不是，只需忽略它们并仅在保存时才生成它们。

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());