我有一个包含多行的表,其中包含表单输入(复选框,文本,下拉列表)。当我单击save时,我希望能够获得代表将在AJAX请求中使用的每个表行的JSON。每行都有一个id,所以我想得到这样的东西:
[1: { "input_name":"input_value", "input_name":"input_value", etc...}, 2: {etc...}]
这些数字是表格行的id。
有什么办法吗?
答案 0 :(得分:22)
这应该做你需要的:
<table>
<tr id="101">
<td><input type="text" name="f1" value="" /></td>
<td><input type="checkbox" name="f2" value="v2" /></td>
<td><input type="checkbox" name="f3" value="" /></td>
<td><select name="f4">
<option>1</option>
<option>2</option>
<option>3</option>
</select></td>
</tr>
<tr id="102">
<td><input type="text" name="f1" value="" /></td>
<td><input type="checkbox" name="f2" value="v2" /></td>
<td><input type="checkbox" name="f3" value="" /></td>
<td><select name="f4">
<option>1</option>
<option>2</option>
<option>3</option>
</select></td>
</tr>
<tr id="103">
<td><input type="text" name="f1" value="" /></td>
<td><input type="checkbox" name="f2" value="v2" /></td>
<td><input type="checkbox" name="f3" value="" /></td>
<td><select name="f4">
<option>1</option>
<option>2</option>
<option>3</option>
</select></td>
</tr>
</table>
<button id="btnGo">Go</button>
<script type="text/javascript">
$('#btnGo').click(function(){
var data={};
$('table').find('tr').each(function(){
var id=$(this).attr('id');
var row={};
$(this).find('input,select,textarea').each(function(){
row[$(this).attr('name')]=$(this).val();
});
data[id]=row;
});
console.log(data);
});
</script>
答案 1 :(得分:2)
没有经过测试,但这样的事情应该有效
var myjson = new Object();
$("#tableid > tr").each(function () {
var tablerow = $(this);
$("td input", tablerow).each(function () {
var input = $(this);
myjson[tablerow.attr("id")][input.attr("name")] = input.val();
});
});
答案 2 :(得分:0)
您可以使用SerializeFromTable JQuery插件序列化任何带有或不带有表单元素的表。
无需用