jQuery 實現批量提交表格多行數據的方法

來源：懂視網責編：小采時間：2020-11-27 22:10:26

jQuery 實現批量提交表格多行數據的方法

jQuery 實現批量提交表格多行數據的方法:批量提交用jquery操作起來還是很方便的，主要的思路就是在動態生成表格時每一行都存下這條數據的唯一id，然后監聽選擇，把選中的數據放入數組，最后提交到后臺就OK了。先上一部分代碼（這是表頭以及一個全選按鈕） <table class=ui_table

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery 實現批量提交表格多行數據的方法:批量提交用jquery操作起來還是很方便的，主要的思路就是在動態生成表格時每一行都存下這條數據的唯一id，然后監聽選擇，把選中的數據放入數組，最后提交到后臺就OK了。先上一部分代碼（這是表頭以及一個全選按鈕） <table class=ui_table

批量提交用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 選擇器

選擇器	實例	選取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素

我這里用到的.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);
}

最后效果：