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如何实现批量提交表格多行数据的方法