jQuery 표 여러 줄 의 데 이 터 를 대량으로 제출 하 는 방법

일괄 제출 은 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);
 }
}

표 데 이 터 를 어떻게 동적 으로 생 성 하 는 지 여 기 는 더 이상 말 하지 않 겠 습 니 다.아래 데 이 터 는 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 가 표 여러 줄 의 데 이 터 를 대량으로 제출 하 는 방법 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.