jQuery如何实现批量提交表格多行数据的方法

　　介绍

这篇文章主要介绍jQuery如何实现批量提交表格多行数据的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强>先上一部分代码(这是表头以及一个全选按钮)

, & lt; table 类=皍i_table  ui_table_hover  ui_table_striped  ui_table_style02  table_fixed"比; 　　,,& lt; tr> 　　,,,& lt; th 宽度=?%“,类=癮lign_c"比; 　　,,,,& lt; input 类型=癱heckbox", onclick=癱hooseAll ()“, id=癱hooseAll", name=癱hooseAll"/比; 　　,,,& lt;/th> 　　,,,& lt; th 宽度=啊?%;在平台日期& lt;/th> 　　,,,& lt; th 宽度=啊?%;在交易日期& lt;/th> 　　,,& lt;/tr> 　　,,& lt; tbody  id=皅uerydata"比; 　　, 　　,,& lt;/tbody> 　　,& lt;/table>

chooseAll函数,判断全选按钮是否选中,然后遍历复选框做相应的选择。知识点:

<强> jQuery选择器

选择器实例选取* $(“*”)所有元素# $ (“# lastname") id=發astname"美元的元素. class (“.intro")所有类=癷ntro"的元素

<强>我这里用到的。类

function  chooseAll (), { 　　,if  ($ (“# chooseAll") .(& # 39;:检查# 39;)),{ 　　美元才能(“.choose") .attr (“checked",,真的); 　　,}else  { 　　美元才能(“.choose") .attr (“checked",,假); 　　,} 　　}

如何动态生成表格数据,这里不做多说了、下面是ajax的数据返回的json数据复选框的名字全部为ckItm,这在后面取数据的时候用到

, for  (var 小姐:=,0;,小姐:& lt;, data.length;,我+ +),{ 　　var 才能;tr 美元;=,美元(“& lt; tr 风格=& # 39;游标:指针;& # 39;祝辞& lt;/tr>“); 　　var 才能;td 美元;=,美元(“& lt; td 类=& # 39;align_c& # 39;祝辞& lt;/td>“); 　　(tr.append美元才能td.clone () .append (“& lt; input  type=& # 39;复选框# 39;,name=& # 39; ckItm& # 39;,值=https://www.yisu.com/zixun/?数据[我]。platflow +”“阶级='选择'/> ")); 　　(tr.append美元td.clone ()。text(数据[我]。platdate吗?数据[我]。platdate: " ")); 　　(tr.append美元td.clone ()。text(数据[我]。trandate吗?数据[我]。trandate: " ")); 　　tr.appendTo美元($ (" # querydata ")); 　　}

提交按钮执行的动作就是遍历已经选中的复选框,获取值传到后台,这里用到了数组的方式,大家也可以用分隔符。

美元(& # 39;输入[name=癱kItm"]:检查# 39;)类型为输入且名称为ckItm并且选中的元素,每遍历列表

var=[];列表。推动向数组里面加一个元素

美元(& # 39;# listButton& # 39;) .click (function  (), { 　　,var  list =, []; 　　,美元(& # 39;输入[name=癱kItm"]:检查# 39;). each (function  (), { 　　list.push才能($(这).val ()); 　　,}); 　　,if  (list ==,““), { 　　美元才能u.alert(“请选择需要经办的单据“); 　　,}else  { 　　美元才能u.ajax ({ 　　,,,异步:假的, 　　,,,url:“3002800007/batchMerSettleHandle.do", 　　,,,数据:{“[]“列表:列出}, 　　,,,成功:function (数据),{ 　　,,,警报(数据); 　　,,}, 　　,,,错误:function (数据),{ 　　,,} 　　,,}); 　　,} 　　});

Java后台控制器@RequestParam (value=https://www.yisu.com/zixun/癧]”列表,需要=false) String[]名单,接受数组类型的值

@RequestMapping (“/3002800007/batchMerSettleHandle") 　　@ResponseBody 　　public  String  batchMerSettleHandle (@RequestParam (=value “列表[]“,,required =, false), String[],列表,HttpSession 会话),{ 　　return  JSON.toJSONString(列表); 　　}

<>强最后效果:

jQuery如何实现批量提交表格多行数据的方法

jQuery是什么

jQuery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对css选择器进行扩展,拥有便捷的插件扩展机制和丰富的插件,是继原型之后又一个优秀的JavaScript代码库,能够用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。

以上是“jQuery如何实现批量提交表格多行数据的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

jQuery如何实现批量提交表格多行数据的方法