本文参考网络的一个例子(提供附件下载)
动态添加行、删除行,保存时遍历某列的值,组成逗号分隔的字符串传到后台,编辑时显示结果集,能继续添加和删除。
主要的代码如下:
在body里的table。编辑的时候遍历list,写法与动态拼tr保持一致。table后面跟一个输入框,一个按钮,输入的值点击添加进入动态列表里。
保存的时候,相加tzgjs_tab列的值,用逗号分隔,然后传给后台处理
效果图1
[img]http://dl.iteye.com/upload/picture/pic/108010/d9945095-7d40-37e2-9d9d-57c50710b211.jpg[/img]
效果图2
[img]http://dl.iteye.com/upload/picture/pic/108012/1a096d2e-0e62-33b3-b78f-feed190feeb6.jpg[/img]
动态添加行、删除行,保存时遍历某列的值,组成逗号分隔的字符串传到后台,编辑时显示结果集,能继续添加和删除。
主要的代码如下:
$(document).ready(function(){
$("#but").click(function(){
var $table=$("#tzgjz_tab tr");
var len=$table.length;
$("#tzgjz_tab").append("<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>"+$("#tzgjz").val()+"</td><td align=\'center\'><a href=\'javascript:deltr("+(len+1)+")\'>删除</a></td></tr>");
//清空输入框
$("#tzgjz").val('');
})
})
//删除行
function deltr(index){
$table=$("#tzgjz_tab tr");
$("tr[id=\'"+index+"\']").remove();
}
在body里的table。编辑的时候遍历list,写法与动态拼tr保持一致。table后面跟一个输入框,一个按钮,输入的值点击添加进入动态列表里。
<div>
<table id="tzgjz_tab" width="50%" align="left" border="0" cellspacing="1" cellpadding="0" bgcolor="#b5d6e6" class="table_edit">
<tr>
<td width="50" align="center">序号</td>
<td align="center">关键字</td>
<td width="80" align="center">操作</td>
</tr>
<s:iterator value="#request.tzgjzList" status="state">
<tr id="<s:property value="xh+1"/>">
<td align="center"><s:property value="xh"/></td>
<td align="center"><s:property value="tzgjz_tab"/></td>
<td align="center"><a href='javascript:deltr("<s:property value="xh+1"/>")'>删除</a></td>
</tr>
</s:iterator>
</table>
<div>
请输入关键字<input type="text" id="tzgjz" />
<input type="button" id="but" value="添加" />
</div>
</div>
保存的时候,相加tzgjs_tab列的值,用逗号分隔,然后传给后台处理
var gjz='';
$("table#tzgjz_tab tr td:nth-child(2)").each(function(){
if($(this).text()!='关键字'){//去掉标题
if(gjz==''){
gjz+=$(this).text();
}else{
gjz+= ","+$(this).text();
}
}
});
效果图1
[img]http://dl.iteye.com/upload/picture/pic/108010/d9945095-7d40-37e2-9d9d-57c50710b211.jpg[/img]
效果图2
[img]http://dl.iteye.com/upload/picture/pic/108012/1a096d2e-0e62-33b3-b78f-feed190feeb6.jpg[/img]