聰明，有效的方式來重新排序jQuery中的表單數組？

我有我的網頁上的項目列表，用戶可以動態添加和刪除。每個項目類似於此：聰明，有效的方式來重新排序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的方式來使這個簡單？否則，我可能會說「擰緊它」並檢查服務器端的缺失序列。

來源

2012-07-02 Jeremy Holovacs

頁面中的序列號在可編輯時是否與頁面相關？如果沒有，只需省略它們並讓它們僅在保存時生成。

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-02 18:46:30

不幸的是，他們是......我需要能夠關閉特定的行。 –

我可能會使用屬性''tr class =「LELOC」locref =「blah1」>然後通過'locref'引用它們，而不是依賴於id號碼（特別是如果id預計會改變）。這樣，您就可以在頁面中訪問它們的方式和隨後如何保存它們之間切斷，同時仍然保持在頁面中操作它們的能力。 –

您可以輕鬆地遍歷所有TR元素並在表單發佈之前更新id屬性。

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

在表單提交之前這樣做，它會將它們全部更改爲按順序。

來源

2012-07-02 18:39:27

好吧，行ID比表單輸入名稱更不用擔心。 –

同樣適用於每一行的內容。只需找到後代元素並更新其屬性。否則，只需在服務器端處理表單時設置值。 –

聰明，有效的方式來重新排序jQuery中的表單數組？

回答

相關問題