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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery 实现批量提交表格多行数据的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2447字，纯文字阅读大概需要4分钟。

内容图文

批量提交用jquery操作起来还是很方便的，主要的思路就是 在动态生成表格时每一行都存下这条数据的唯一id，然后监听选择，把选中的数据放入数组，最后提交到后台就OK了。

先上一部分代码（这是表头以及一个全选按钮）

 <table class="ui_table ui_table_hover ui_table_striped ui_table_style02 table_fixed">
   <tr>
    <th width="3%" class="align_c">
     <input type="checkbox" onclick="chooseAll()" id="chooseAll" name="chooseAll"/>
    </th>
    <th width="5%">平台日期</th>
    <th width="5%">交易日期</th>
   </tr>
   <tbody id="querydata">
 
   </tbody>
 </table>

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

jQuery 选择器

我这里用到的.class

function chooseAll() {
 if ($("#chooseAll").is(':checked')) {
  $(".choose").attr("checked", true);
 } else {
  $(".choose").attr("checked", false);
 }
}

如何动态生成表格数据，这里不做多说了，下面的data是ajax返回的json数据 checkbox的name全部为 ckItm，这在后面取数据的时候用到

 for (var i = 0; i < data.length; i++) {
  var $tr = $("<tr style='cursor:pointer;'></tr>");
  var $td = $("<td class='align_c'></td>");
  $tr.append($td.clone().append("<input type='checkbox' name='ckItm' value='" + data[i].platflow + "' class='choose'/>"));
  $tr.append($td.clone().text(data[i].platdate ? data[i].platdate : ""));
  $tr.append($td.clone().text(data[i].trandate ? data[i].trandate : ""));
  $tr.appendTo($("#querydata"));
 }

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

$('input[name="ckItm"]:checked') 类型为input 且name为ckItm 并且选中的元素 .each遍历

var list = []; list.push 向数组里面加一个元素

$('#listButton').click(function () {
 var list = [];
 $('input[name="ckItm"]:checked').each(function () {
  list.push($(this).val());
 });
 if (list == "") {
  $u.alert("请选择需要经办的单据");
 } else {
  $u.ajax({
   async: false,
   url: "3002800007/batchMerSettleHandle.do",
   data: {"list[]": list},
   success: function (data) {
    alert(data);
   },
   error: function (data) {
   }
  });
 }
});

Java后台controller @RequestParam(value = "list[]", required = false) String[] list，接受数组类型的值

@RequestMapping("/3002800007/batchMerSettleHandle")
@ResponseBody
public String batchMerSettleHandle(@RequestParam(value = "list[]", required = false) String[] list, HttpSession session) {
return JSON.toJSONString(list);
}

最后效果：

最后祝大家大吉大利！

以上这篇jQuery 实现批量提交表格多行数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的jQuery 实现批量提交表格多行数据的方法全部内容，希望文章能够帮你解决jQuery 实现批量提交表格多行数据的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端