思路：把表格中行的数据拼成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="frid1"></td>
<td><a href="#" onclick="delRow(this);">点击删除</a></td>
</tr>
</table>
<a href="/servlet/JsonServlet?jsonObj=">提交</a>
<input type="checkbox" onclick="showChec();" id="chec"/>
</body>
</html>
使用解析Json格式的字符串。
import java.util.ArrayList;
import java.util.List;
import com.google.gson.Gson;
public class TestJson {
public static void main(String[] args) {
List<Person> persons = new ArrayList<Person>(0);
Person person = new Person("name1", "age1");
persons.add(person);
Person person1 = new Person("name2", "age2");
persons.add(person1);
Person person2 = new Person("name3", "age3");
persons.add(person2);
Gson gson = new Gson();
System.out.println(gson.toJson(persons));
String jsonString = gson.toJson(persons);
java.lang.reflect.Type type = new com.google.gson.reflect.TypeToken<List<Person>>() {
}.getType();
String json = gson.toJson(persons, type);
System.out.println(json);
String tmp="[{'name':'name1','age':'age1'},{'name':'name2','age':'age2'},{'name':'name3','age':'age3'}]";
List<Person> persons1 = gson.fromJson(tmp, type);
for (Person person3 : persons1) {
System.out.println(person3.getName());
}
// gson.to
}
}
class Person {
public Person(){}
public Person(String name, String age) {
this.age = age;
this.name = name;
}
private String name;
private String age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
}
更多关于Google Json jar的用法，参见：http://www.cnblogs.com/lupeng0527/archive/2011/08/06/2129547.html
分享到：
相关推荐
ASP脚本负责接收这些数据，并将其保存到数据库中。尽管具体实现细节没有在给定内容中提及，但可以知道ASP后台将处理表单数据，并与数据库进行交互，比如通过SQL语句实现数据的插入操作。 6. **前端代码实现注意事项...
本文介绍了如何通过使用JQuery的Clone方法来巧妙添加多行数据，并将这些数据更新到数据库中。首先，我们看到的是一个前端页面的HTML代码，这个页面包含了动态添加数据行的功能。接下来，我们深入探讨JQuery的Clone...
在服务器端，你需要处理这些数据并将其保存到数据库中。ASP的代码部分没有在这篇文章中给出，但通常会涉及到解析`POST`请求中的数据，然后执行相应的SQL插入语句。 总结来说，这个示例展示了如何使用JavaScript在...
在.NET开发环境中，将Excel数据上传到数据库是一项常见的任务，特别是在处理大量表格数据时。本教程将详述如何实现这一过程，以".NET中EXCEL上传到数据库完整版"为例，我们将探讨关键步骤和涉及的技术。 首先，我们...
此外，为了提高性能，你可能需要考虑批处理插入，将多行数据一次性插入到数据库中。 总结来说，导入Excel数据到数据库的流程主要包括：前端上传文件、后端接收文件、使用Apache POI读取Excel内容、处理数据并插入到...
通常，这会涉及到Ajax请求，通过POST或PUT方法将更新的数据发送到服务器，服务器接收到请求后进行相应的数据库操作，如更新或插入记录。 三、多行数据提交 在多行数据编辑场景下，用户可能需要同时编辑多行记录，...
在这个特定的Sample代码中，可能涉及到如何在用户界面中选择多行数据，然后通过后端逻辑一次性删除所选行对应的代码。 在JDeveloper中实现这个功能，通常涉及以下步骤： 1. **创建模型**：首先，你需要定义一个...
通过DWR，前端的JavaScript代码可以实时同步后台数据库的状态。 5. **支持以对象或者数组方式获取选中行数据** Flexigrid提供了一种方便的方式来获取选中行的数据，无论是作为单独的对象还是作为包含多行数据的...
表格控件（Table Control），通常用于显示结构化的多行多列数据，如数据库中的记录。在本场景中，表格控件可能连接到一个数据库文件dzlv1.dbf，这是一个DBF格式的数据库文件，常用于早期的Visual FoxPro等数据库系统...
1. 数据绑定：datagrid通常需要与数据源进行绑定，如数据库、XML文件或对象集合。编辑操作会直接影响到数据源，因此需要确保数据绑定的正确性和实时性。 2. 验证：为了保证数据的准确性和完整性，通常需要对用户...
在本项目中，SSM框架可能用于处理用户请求，将数据从数据库中读取并展示在表格中，同时实现后台的数据导出和删除操作。 Ajax，即异步JavaScript和XML，是一种在不刷新整个页面的情况下与服务器交换数据并更新部分...
一旦用户选择了一些行，后台代码会遍历DataGrid，获取选中状态的CheckBox对应的行，并根据行号或者数据绑定的键值从数据源中找到对应的数据记录。 5. **删除操作**：在收集完要删除的行后，需要在数据源中执行删除...
DataTable则是System.Data命名空间的一部分，它是关系数据库模型的一个轻量级表示，可以容纳多行、多列的数据，并支持查询和操作。 要将List的数据导出到Excel，首先需要将List的数据转换成DataTable。这可以通过...
本教程将详细讲解如何利用Java的SSM（Spring、SpringMVC、MyBatis）框架，配合前端技术，实现Excel文件上传并将其中的数据插入到MySQL数据库中的表格。 首先，我们需要在前端创建一个文件上传的表单，通常使用HTML5...
总之，利用JDeveloper在ADF Table中实现多行删除功能，主要涉及到Table组件的配置、`ADF checkbox`的使用、事件监听、后台数据模型的交互以及用户交互的设计。通过这些步骤，你可以创建一个功能完备且用户体验良好的...
这种报表格式允许开发者在后台代码中动态生成和控制报表的结构和内容，提供了灵活的数据呈现方式。在.NET Framework环境下，RDLC报表常用于Windows Forms、ASP.NET等应用中。 动态生成RDLC报表主要涉及到以下几个...
这款自定义表单是唯一一个实现在IE中可视化设计,无须下载插件,能操作后台数据库的表单工具 1：基本控件（shape控件，spin控件，checkboxlist控件，radiolist控件，掩码输入，两listbox互选，用代码控制页签控件）2：...
- **数据库前端**：在无服务器或者轻量级Web应用中，作为用户界面与后台数据库交互的桥梁。 3. **实现原理**： - **HTML**：构建表格的基本结构，包括表格的行、列和单元格。 - **CSS**：美化表格样式，使其符合...
例如，你可以创建一个窗体，上面有一个DataGridView控件显示Access数据库中的数据，然后在后台使用AxMSFlexGrid实现更复杂的视图或编辑功能。当用户在DataGridView中修改数据并保存时，可以通过数据适配器的Update...