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>。