不需要form,获取table所有数据,整合为json数据 传送给后台

来源:互联网 发布:淘宝牛仔女裤 编辑:程序博客网 时间:2024/04/29 23:13

我的表格是列表式的数据,如图


html:这里我要获取表格前4列的内容,表格的内容用js调取的json数据 ,展现出来的html的代码是

<table>
<tbody>
<tr>
<td><input type="number" value="1"/></td>
<td><input type="number" id="" value="123321" /></td>
<td><input type="text" id="" value="产品分类1" /></td>
<td><input type="file" value="选择文件"/></td>
<td><img src="img/img.phg"/></td>
<td>
<a href="JavaScript:;" class="delete">删除</a>
</td>
</tr>

<tr>
<td><input type="number" value="2"/></td>
<td><input type="number" id="" value="123321" /></td>
<td><input type="text" id="" value="产品分类2" /></td>
<td><input type="file" value="选择文件"/></td>
<td><img src="img/img.phg"/></td>
<td>
<a href="javascript:;" class="delete">删除</a>
</td>
</tr>

<tr>
<td><input type="number" value="3"/></td>
<td><input type="number" id="" value="123321" /></td>
<td><input type="text" id="" value="产品分类3" /></td>
<td><input type="file" value="选择文件"/></td>
<td><img src="img/img.phg"/></td>
<td>
<a href="javascript:;" class="delete">删除</a>
</td>
</tr>

<tr>
<td><input type="number" value="4"/></td>
<td><input type="number" id="" value="123321" /></td>
<td><input type="text" id="" value="产品分类4" /></td>
<td><input type="file" value="选择文件"/></td>
<td><img src="img/img.phg"/></td>
<td>
<a href="javascript:;" class="delete">删除</a>
</td>
</tr>

<tr>
<td><input type="number" value="5"/></td>
<td><input type="number" id="" value="123321" /></td>
<td><input type="text" id="" value="产品分类5" /></td>
<td><input type="file" value="选择文件"/></td>
<td><img src="img/img.phg"/></td>
<td>
<a href="javascript:;" class="delete">删除</a>
</td>
</tr>
</tbody>
</table>
<a href="javascript:;" id="sent_button">更新</a>


js:
首先引用jQuery文件
<script src="js/jquery.min.js"></script>
获取table内容的js


function getInt(){
var k;
var att = {};
//创建一个空的json
var id,number_,name,image;//定义四个变量,分别是表格中索要获取的分类id、编号、名称、上传图
var Array = [];//一个空的数组
$('#tbody tr').each(function(){//遍历每一个tr
var st = [];//空数组,用于存放每一个tr里td的值
var chil = $(this).children('td');
var tdcount = chil.length-2;
var txt;
//alert(tdcount);
for (k=0;k<tdcount;k++) {//循环得到td的四项内容值
txt = chil.eq(k).children('input').val();
//alert(txt)
st.push(txt);
}
id = st[0];
number_ = st[1];
name = st[2];
image = st[3]
att = {
'id':id,//分类id
'number':number_,//分类排序编号
'name':name,//分类名称
'image':image//分类上传图片本地路径
};//把每一个tr的数据写成一个json数据
//console.log(att);
Array.push(att);//把json数据写入数组
})

console.log(Array);
}

用console.log();测试  得到json数组,图



把获取到的json数组传给后台就ok啦。



第一次写博客,不太会写,希望能帮到有需要的人。有更好方案的大神们求带飞





2 0