封存表格中的多行数据对象到后台数据库
日期：2014-05-16 浏览次数：20374 次
保存表格中的多行数据对象到后台数据库
?思路：把表格中行的数据拼成Json格式的字符串传到后台，在后台使用解析Json字符串成相关的对象或者集合，然后持久化操作。
依赖包：Jquery，gson-1.4.jar
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function addRow(){
jQuery("#trData").clone().appendTo("#Tdate");
var temp="<tr><td bgcolor='green'>11</td><td bgcolor='blue'>22</td><td bgcolor='grey'>33</td></tr>";
jQuery("#Tdate").append(temp);
}
function delRow(obj){
jQuery("#trData").remove();
}
function showChec(){
alert(jQuery("#chec").attr("checked"));
}
$(function(){
alert("总共的元素："+jQuery("#Tdate input:hidden").size());
alert(jQuery("#Tdate tr").size());
jQuery("#Tdate input:hidden").each(function(){
var tmp=$(this).val();
if(tmp==4){
return;
}
else{
alert(tmp);
}
});
});
var arr=new Array();
$(function(){
alert("开始循环表格中的元素了。");
var name="";
var sex="";
var age="";
var addr="";
//[{"name":"name1","age":"age1"}
var obj={'name': name , 'sex': sex , 'age' : age ,'addr':addr };
var stringOjb="["
jQuery("#Tdate tr:gt(0)").each(
function (i){
if(i!=3){
name=jQuery(this).find("#name").text();
stringOjb+="{'name':"+name;
sex=jQuery(this).find("#sex").text();
stringOjb+=" ,'sex':"+sex;
age=jQuery(this).find("#age").text();
stringOjb+=" ,'age':"+age;
addr=jQuery(this).find("td > input:text").val();
stringOjb+=" ,'addr':"+addr +"},";
}
if(i==3){
alert("取文本框中的值了。");
//alert(jQuery(this).find("input:text").val());
alert("addr:"+ jQuery(this).find("td > input:text").val());
}
}
);
stringOjb+="]";
alert(stringOjb);
});
</script>
</head>
<body>
<input type="button" value="点击添加一行" onclick="addRow();">
<table id="Tdate" border="1">
<tr id="trData" bordercolor="red">
<td bgcolor="green">11</td>
<td bgcolor="blue">22</td>
<td bgcolor="grey">33
<input type="text" value="1" id="frid">
<input type="hidden" value="3" id="frid">
</td>
<td bgcolor="grey"><input type="hidden" value="4" id="frid"></td>
<td><a href="#" onclick="delRow(this);">点击删除</a></td>
</tr>
<tr id="trData1" bordercolor="red">
<td bgcolor="green" id="name">111</td>
<td bgcolor="blue" id="sex">222</td>
<td bgcolor="grey" id="age">333</td>
<td bgcolor="grey" id="addr"><input type="text" value="我的地址测试" id="frid1"></td>
<td><a href="#" onclick="delRow(this);">点击删除</a></td>
</tr>
<tr id="trData1" bordercolor="red">
<td bgcolor="green" id="name">1121</td>
<td bgcolor="blue" id="sex">2224</td>
<td bgcolor="grey" id="age">3336</td>
<td bgcolor="grey" id="addr"><input type="text" value="我的地址" id="fri
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
