jQuery JSON編碼輸入值集

Question

我需要tp序列化一組輸入元素，但我不能爲我的生活找出這個簡單的任務。

我可以通過有針對性的投入使用迭代成功：

$("#tr_Features :input").each(function() { 
    ... 
} 

這裏是我的代碼，不工作：

var features = ""; 
$("#tr_Features :input").each(function() { 
    features += {$(this).attr("name"): $(this).val()}; 
} 

序列化整個窗體不會給我我需要什麼。表單比這個輸入子集多得多。這似乎應該是一個非常簡單的任務，但顯然編程晚到星期五下午是不是一件好事。

如果它是有幫助的，這裏的表單輸入我的定位目標：

<table cellspacing="0" border="0" id="TblGrid_list" class="EditTable" cellpading="0"> 
<tbody><tr class="FormData" rowpos="1"> 
    <td class="CaptionTD ui-widget-content">Cable Family</td> 
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:8" name="feature_id:8"></td> 
</tr> 
<tr class="FormData" rowpos="1"> 
    <td class="CaptionTD ui-widget-content">Material</td> 
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:9" name="feature_id:9"></td> 
</tr> 
<tr class="FormData" rowpos="1"> 
    <td class="CaptionTD ui-widget-content">Thread Size</td> 
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:10" name="feature_id:10"></td> 
</tr> 
<tr class="FormData" rowpos="1"> 
    <td class="CaptionTD ui-widget-content">Attachment Style</td> 
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:11" name="feature_id:11"></td> 
</tr> 
<tr class="FormData" rowpos="1"> 
    <td class="CaptionTD ui-widget-content">Feature</td> 
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:12" name="feature_id:12"></td> 
</tr> 
<tr class="FormData" rowpos="1"> 
    <td class="CaptionTD ui-widget-content">Comments</td> 
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:13" name="feature_id:13"></td> 
</tr> 

Answer 1

顯然我所創造的只是一個對象，而且很長很難。這聽起來比它應該有的更糟糕，但這是事實。我需要做的只是在index/key處使用name屬性，並使用val（）作爲值。

var data = new Object(); 
$("#tr_Features :input").each(function() { 
    data[$(this).attr("name")] = $(this).val(); 
}); 
return data; 

這工作。誰知道？！真的很簡單。你們都向我伸出一隻手來幫助我，並在星期五打電話升級。乾杯!

Answer 2

你想+=數組...嘗試使用features.push或從$.each功能使用索引：features[i] = someval

編輯

我注意到，您的所有tr s（以及一些td s！）都有相同的ID。這也可能導致一些問題。確保你所有的ID都是獨一無二的。

Answer 3

+=不會將對象添加到JavaScript中的數組。你想要的是.push()：

var features = new Array(); 
$("#tr_Features :input").each(function(){ 
    features.push({$(this).attr("name"): $(this).val()}); 
}); 

但是等等，還有更多！據我所知，jQuery不支持將對象轉換爲JSON字符串（雖然它支持解析JSON）。您需要爲此使用單獨的JSON庫，例如this one。

Answer 4

編輯：

如果我正確理解你的問題，這會給你你想要的JSON對象。

請注意，它需要json2庫。

var features = {}; // Create empty javascript object 

$("#tr_Features :input").each(function() {   // Iterate over inputs 
    features[$(this).attr('name')] = $(this).val(); // Add each to features object 
}); 

var json = JSON.stringify(features); // Stringify to create json object (requires json2 library) 

感謝R0MANARMY指出問題中預期的json格式。

---

有沒有原因你不使用jQuery的.serializeArray()函數？您可以在元素的子集上運行它，而不是整個表單。

$("#tr_Features :input").serializeArray(); 

從文檔：http://api.jquery.com/serializeArray/

的.serializeArray（）方法創建對象的JavaScript陣列，準備被編碼爲JSON字符串。

The。serializeArray（）方法可以作用於選擇了單個表單元素的jQuery對象，如<input>,<textarea>和<select>。