查看路由器ADSL密码

本文参考网络的一个例子（提供附件下载）
动态添加行、删除行，保存时遍历某列的值，组成逗号分隔的字符串传到后台，编辑时显示结果集，能继续添加和删除。
主要的代码如下：

$(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



效果图2