1

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

<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 方法可以让这个简单？否则我可能会说“搞砸”并检查服务器端是否缺少序列。

4

2 回答 2

0

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

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

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

于 2012-07-02T18:39:27.253 回答
0

序列号在可编辑的同时是否与页面相关？如果没有，只需省略它们并仅在保存时生成它们。

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());
于 2012-07-02T18:46:30.280 回答