请教个jquery的问题，本人新手，怕描述不清，看图说话。 - ITeye问答
上图是页面的部分效果，因为每次输入的的数据很多字段是重复的， 偶尔需要修改。
我想做到得效果是在红圈处增加一个按钮，每点击下，在下面的表单初始化一新行，数据为该行上一行的数据。
代码如下：
&meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
&!-- 引入JSCal2-1.7 --&
&script language="JavaScript" src="/myproject/plugins/JSCal2-1.7/src/js/jscal2.js"&&/script&
&script language="JavaScript" src="/myproject/plugins/JSCal2-1.7/src/js/lang/cn.js" charset="utf-8"&&/script&
&link rel="stylesheet" type="text/css" href="/myproject/plugins/JSCal2-1.7/src/css/jscal2.css" /&
&script type="text/javascript" src="/myproject/plugins/EventUtil/EventUtil.js"&&/script&
&link rel="stylesheet" href="/myproject/plugins/slick.grid/css/slick.grid.css" type="text/css" media="screen" charset="gb2312" /&
&link rel="stylesheet" href="/myproject/plugins/slick.grid/css/examples.css" type="text/css" media="screen" charset="gb2312" /&
&link rel="stylesheet" href="/myproject/plugins/jquery-message/jquery.message.css" type="text/css" media="screen" charset="gb2312" /&
&!-- 引入jQuery --&
&script language="JavaScript" src="/myproject/plugins/jQuery/js/jquery-1.3.2.min.js"&&/script&
&!-- 引入JSON --&
&script language="JavaScript" src="/myproject/plugins/json/json2.js"&&/script&
&!-- 引入Slick.Grid --&
&script language="JavaScript" src="/myproject/plugins/slick.grid/js/firebugx.js"&&/script&
&script language="JavaScript" src="/myproject/plugins/slick.grid/js/jquery.getScrollbarWidth.js"&&/script&
&script language="JavaScript" src="/myproject/plugins/slick.grid/js/jquery.rule-1.0.1-min.js"&&/script&
&script language="JavaScript" src="slick.editors.js"&&/script&
&script language="JavaScript" src="/myproject/plugins/slick.grid/js/slick.grid.js"&&/script&
&script language="JavaScript" src="/myproject/plugins/slick.grid/js/slick.globaleditorlock.js"&&/script&
&script language="JavaScript" src="/myproject/plugins/validator/validator.js"&&/script&
&!-- 引入jquery-message --&
&script src="/myproject/plugins/jquery-message/jquery.message.js" type="text/javascript"&&/script&
background:
outline: 1
width:99%;
height:400
///////////////////////////////////////////////////////////////////////////
//////////////////////////////全局信息定义/////////////////////////////////
//数据状态
var RAW = 0; //原始
var NEW = 1; //新增
var MODIFIED = 2; //被修改
var DELETED = 3; //删除
var G_PrevRow = -1; //前一工作行
var G_LastRow = -1; //最后提交的行
var G_IsModified =//文档状态
var G_IsReady = //工作行是否处理就绪
var G_Current = new Date();//当前时间
var G_GridData = [];//表格基础数据
var G_DeletedRows = [];//需要服务器提交行ID列表
var G_DeleteItemRowNumbers = [];//需要服务器提交行序号列表
var G_PositionList = [];
&#if position?exists&
&#list position as item&
G_PositionList[G_PositionList.length]="${item.position}";
var G_Columns = [
{id:"select", name:"¢er&&INPUT id='selectAll' type='checkbox' value='true' class='editor-checkbox' hideFocus&&/center&", width:30, formatter:SelectCellFormatter},
{id:"persName", name:"姓名", field:"persName", editor:TextCellEditor, validator : requiredFieldValidator},
{id:"sex", name:"性别", field:"sex", editor:SexSelectCellEditor, validator : requiredFieldValidator},
{id:"nation", name:"民族", field:"nation", editor:TextCellEditor},
{id:"birthPlace", name:"籍贯", field:"birthPlace", editor:TextCellEditor},
{id:"birthday", name:"出生年月", field:"birthday", width:120,editor:DateCellEditor},
{id:"idCard", name:"工种", field:"idCard", editor:PositionSelectCellEditor,
validator : requiredFieldValidator},
{id:"workTime", name:"参加工作时间", field:"workTime", width:120,editor:DateCellEditor, validator : requiredFieldValidator},
{id:"position", name:"职位", field:"position", editor:TextCellEditor},
{id:"joinOrg", name:"所在部门", field:"joinOrg", editor:TextCellEditor, validator : requiredFieldValidator},
{id:"joinTime", name:"加入本部门时间", field:"joinTime", width:120,editor:DateCellEditor},
{id:"political", name:"政治面貌", field:"political", editor:TextCellEditor},
{id:"education", name:"文化程度", field:"education", editor:TextCellEditor},
{id:"techHera", name:"技术等级", field:"techHera",
editor:TextCellEditor},
{id:"address", name:"住址", field:"address", editor:TextCellEditor},
{id:"tel", name:"联系***", field:"tel", editor:TextCellEditor}
var G_Options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false
//////////////////////////////全局信息定义结束/////////////////////////////////
///////////////////////////////////////////////////////////////////////////
//文档加载完成
$(function()
$("#query").click(function(){
if(G_IsModified)
if(!confirm("数据已经修改，要放弃修改吗?"))
initData();
$("#view").click(function(){
$("#account").click(function(){
account();
$("#save").click(function(){
if(validateCurrentRow())
//alert(JSON.stringify(G_GridData));
//commitDelete(G_DeletedRows);
//commitUpdate(G_GridData);
//commitAdd(G_GridData);
//删除所选
$("#delete").click(function(){
if(validateCurrentRow())
//全部待删除记录行序号列表
var deleteItems = [];
$(":input[name='item'][checked='true']").each(function(){
deleteItems[deleteItems.length] = $(this).attr("id");
//排序待删除行序号
deleteItems.sort(sortNumber);
for(var i = deleteItems. i &0; i--)
var rowNumber = deleteItems[i - 1];
var row = G_GridData[rowNumber];
if(NEW != row.flag)
G_DeletedRows[G_DeletedRows.length] = row.persId;
G_DeleteItemRowNumbers[G_DeleteItemRowNumbers.length] = rowN
G_Grid.removeRow(rowNumber);
G_GridData.splice(rowNumber, 1);
//向服务器提交删除请求
$.post("/myproject/cm/zyn/cm_perInfo/deleteBatch.action",
"queryCondition.items": JSON.stringify(G_DeletedRows)
function(data){
G_DeletedRows.splice(0, G_DeletedRows.length);
if(!data.result)
$().message(data.message + "&a href='javascript:$().message(data.detail)'&\&\&&/a&");
$().message(data.message + "&a href='javascript:$().message(data.detail)'&\&\&&/a&");
//服务器响应删除成功后，删除表格中的实际数据
for(var i = 0; i & G_DeleteItemRowNumbers. i++)
G_Grid.removeRow(G_DeleteItemRowNumbers[i]);
G_GridData.splice(G_DeleteItemRowNumbers[i], 1);
G_DeleteItemRowNumbers.splice(0, G_DeleteItemRowNumbers.length);
G_Grid.resizeCanvas();
G_Grid.render();
G_Grid.resizeCanvas();
G_Grid.render();
//初始化全局控制数据
function initData()
G_PrevRow = -1;
G_IsModified =
G_Current = new Date()
G_GridData = [];
G_DeletedRows = [];
G_DeleteItemRowNumbers = [];
//初始化页面
function init()
//批量提交更新记录
function commitUpdate(items)
var updateList = [];
for(var i = 0; i & items. i++)
if(items[i].flag == MODIFIED)
updateList[updateList.length] = items[i];
if(updateList.length & 0)
$.post("/myproject/cm/zyn/cm_perInfo/updateBatch.action",
"queryCondition.items": encodeURIComponent(JSON.stringify(updateList))
function(data){
if(!data.result)
$().message(data.message.message);
items.splice(0, items.length);
//批量提交新增记录
function commitAdd(items)
var newList = [];
for(var i = 0; i & items. i++)
if(items[i].flag == NEW)
newList[newList.length] = items[i];
alert(JSON.stringify(newList));
if(newList.length & 0)
$.post("/myproject/cm/zyn/cm_perInfo/addBatch.action",
"queryCondition.items": encodeURIComponent(JSON.stringify(newList))
function(data){
if(!data.result)
alert(data.message);
items.splice(0, items.length);
//提交删除操作
function commitDelete(items)
$.post("/myproject/cm/zyn/cm_perInfo/deleteBatch.action",
"queryCondition.items": JSON.stringify(items)
function(data){
if(!data.result)
alert(data.message);
items.splice(0, items.length);
//按照当前条件查询
function query()
$.post("/myproject/cm/zyn/cm_perInfo/searchAllPer.action",
"queryCondition.page": 1,
"queryCondition.startTime": $("#startTime").val(),
"queryCondition.endTime": $("#endTime").val()
function(data){
G_GridData =
initDataState(G_GridData);
if(G_Grid)G_Grid.destroy();
G_Grid = new SlickGrid($("#result"), G_GridData, G_Columns, G_Options);
G_Grid.onValidationError = function(elem, validationResults, row, cell, cellInfo) {
$().message(validationResults.msg);
//新增一行事件处理
G_Grid.onAddNewRow = function(cellInfo, value) {
if(G_IsReady)
G_IsModified =
var item = {persId : "-1",
flag : NEW,
persName : "", sex : "", nation : "", birthPlace : "", birthday : formatDate(G_Current),
idCard : "", workTime : formatDate(G_Current), position : "", joinOrg : "",
joinTime : formatDate(G_Current),political : "", education : "",
techHera : "", address : "", tel : ""
item[cellInfo.field] =
data[data.length] =
G_Grid.resizeCanvas();
G_Grid.render();
G_Grid.updateRow(data.length-1);
//工作行变化事件处理
G_Grid.onSelectedRowsChanged = function(){
G_IsReady =//工作行处理开始
currentRow = G_Grid.getSelectedRows();
if(G_PrevRow != -1 && G_GridData[G_PrevRow] && G_PrevRow != currentRow[0])
if(validateRow(G_Grid, G_PrevRow, G_GridData[G_PrevRow], G_Columns))
G_IsReady =
saveLastRow();
G_PrevRow = currentR
G_IsReady =
G_PrevRow = currentR
//全部选择/取消
$("#selectAll").click(function(){
var state = $(this).attr("checked");
$("input[name='item']").each(function(){
$(this).attr("checked", state);
//保存最近一行
function saveLastRow()
G_LastRow = G_PrevR
var row = G_GridData[G_PrevRow];
switch(row.flag)
$.post("/myproject/cm/zyn/cm_perInfo/add.action",
"queryCondition.items": encodeURIComponent(JSON.stringify(row))
function(data){
G_IsModified =
$().message(data.message);
if(data.result)
G_GridData[G_LastRow].persId = data.
G_GridData[G_LastRow].flag = RAW;
case MODIFIED:
$.post("/myproject/cm/zyn/cm_perInfo/update.action",
"queryCondition.items": encodeURIComponent(JSON.stringify(row))
function(data){
G_IsModified =
if(!data.result)
$().message(data.message);
$().message(data.message + "ddf" +
"&a href='javascript:$().message(data.detail)'&xx&/a&");
G_GridData[G_LastRow].flag = RAW;
//为按钮校验当前行
function validateCurrentRow()
var result =
G_Grid.commitCurrentEdit();
if(!validateRow(G_Grid, G_PrevRow, G_GridData[G_PrevRow], G_Columns))
//对row行进行有效性检验，失败后定位到失败cell
function validateRow(grid, rowNumber, row, columnDef)
var result =
if(columnDef && rowNumber & -1)
for(var i = 0; i & columnDef. i++)
if(columnDef[i].validator && columnDef[i].field)
var validationResults = columnDef[i].validator(row[columnDef[i].field]);
if(!validationResults.valid)
var currentCellNode = grid.gotoCell(rowNumber, i);
$(currentCellNode).addClass("invalid");
if (grid.onValidationError)
grid.onValidationError(currentCellNode, validationResults, rowNumber, i, columnDef[i]);
function sortNumber(a, b)
return a - b
function initDataState(data)
for(var i = 0; i & data. i++)
data[i]["flag"] = RAW;
//获取当前日期所处报表段的起始日期
function generateStartTime(current)
var year = current.getYear();
year = (year & 1900) ? (1900 + year) :
var month = current.getMonth() + 1;
var day = 0;
var segment = (current.getDate() - 1) / 5;
segment = segment & 5 ? 5 : Math.floor(segment);
day = segment * 5 + 1;
return year + "-" + month + "-" +
//获取当前日期所处报表段的结束日期
function generateEndTime(current)
var year = current.getYear();
year = (year & 1900) ? (1900 + year) :
var month = current.getMonth() + 1;
var day = "";
var segment = (current.getDate() - 1) / 5;
segment = segment & 5 ? 5 : Math.floor(segment);
day = segment * 5 + 5;
return year + "-" + month + "-" +
//生成YY-MM-DD格式的日期字符串
function formatDate(date)
var year = date.getYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return year + "-" + month + "-" +
window.self.location = "goSearch.action";
account(){
window.self.location = "goAccountPer.action";
///////////////////////检验函数////////////////////////////////////////////////
function requiredFieldValidator(value){
return isEmpty(value) ? {valid:false, msg:"不能为空"} : {valid:true, msg:null};
&#if output?exists&
&form id="search"&
&div class="title" align="center"&&&煤质人员基本信息&/div&
&div class="toolbarTop"&
&div id="tools"&
&td width="50"&&input type="button" id="delete" value="删除"/&&/td&
&td width="50"&&input type="button" id="view" value="查询"/&&/td&
&td width="50"&&input type="button" id="account" value="生成台账"/&&/td&
&div id="pagination" style="float :"&&/div&
&div id="result"&&/div&
采纳的***
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&
&HTML&
&HEAD&
& &TITLE& New Document &/TITLE&
& &META NAME="Generator" CONTENT="EditPlus"&
& &META NAME="Author" CONTENT=""&
& &META NAME="Keywords" CONTENT=""&
& &META NAME="Description" CONTENT=""&
&& &SCRIPT LANGUAGE="JavaScript" src="jquery-1.3.2.min-vsdoc.js"&&/SCRIPT&
&& &SCRIPT LANGUAGE="JavaScript"&
&& $(function(){
$("#but").bind("click",function(){
});
&& });
&& function addtr() {
&& //得到你要的内容 可以for循环
var $td=$("table tr:eq(1) td:eq(0)").text();
//执行ajax操作把数据存到数据库然后刷新LIST 就会出来
$.ajax();
&& }
&& &/SCRIPT&
&button id="but"&add&/button&
& &table&
&tr&&td&id&/td&&td&name&/td&&td&password&/td&&/tr&
&tr&&td&1&/td&&td&dsa&/td&&td&123&/td&&/tr&
&tr&&td&2&/td&&td&gfg&/td&&td&435&/td&&/tr&
&tr&&td&3&/td&&td&vcvc&/td&&td&6565&/td&&/tr&
& &/table&
&/BODY&
&/HTML&
$("table tr:eq(0) td").length
找出table第一个tr的td数量进行循环就可以
table你可以用table的ID代替
已解决问题
未解决问题