一下是代码：记得要用JQuer。 目前删除功能如果删除的是在中间位置，会所删下面填入数据一起删掉，谨慎使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>Table</title>
<script>
$(document).ready(function(){
var _val=$("#content_show").val();
//接入码
$("#access_id").change(function(){
var _tmp=$(this).val();
if(_tmp==""||_tmp.length==0)
{
if(_val==""||_val.length==0)
{
return;
}
else
{
var _pos=_val.indexOf("+");//int _pos=_val.indexOf("+");
var _len=_val.length;
_val=_val.substr(_pos+1,_len);
}
}
else
{
_val=_tmp+"+"+_val;
}
$("#content_show").val(_val);
})
//命令字 没完成
$("#command_id").change(function(){
var _tmp=$(this).val();
if(_tmp==""||_tmp.length==0)
{
if(_val==""||_val.length==0)
{
return;
}
else
{
var _pos1=_val.indexOf("+");
var _pos2=_val.indexOf("#");
if(_pos2<0)
_pos2=_val.length;
_val=_val.substr(_pos1+1,_pos2);
}
}
else
{
_val=_val+$(this).val()+"+";
}
$("#content_show").val(_val);
})
$("#but").click(function(){
var $tr=$("#tab_child tr");
var _len=$tr.length;
/*
//测试添加<tr/>标签内容
alert("<tr id='"+_len+"'>n"
+"<td align='center'>"+_len+"<input type='checkbox' style='display:none' name='recorder' value='"+_len+"'/></td>n"
+"<td align='center'><input type='text' id='para"+_len+"' name='para"+_len+"' />n"
+"<td align='center'><a href='#' onclick='deltr("+_len+")'>删除</a></td>n"
+"</tr>n");
*/
$("#tab_child").append("<tr id='"+_len+"'>"
+"<td align='center'>"+_len+"<input type='checkbox' style='display:none' name='recorder' value='"+_len+"'/></td>"
+"<td align='center'><input type='text' id='para"+_len+"' name='para"+_len+"' />"
+"<td align='center'><a href='#' onclick='deltr("+_len+")'>删除</a></td>"
+"</tr>");
})
//测试，打印整个<table/>的内容
$("#info").click(function(){
alert($("#tab_child").html());
})
//初始化可路由模块
for(var i=1;i<=5;i++)
{
$("#klymk").append("<option value='"+i+"'>模块"+i+"</option>");
}
//初始化已路由模块
// do something here...
//初始化增加，移除按钮状态
changeButtonStatus();
//增加按钮操作
$("#item_add").click(function(){
var _all=$("#klymk>option").length;
if(_all>0)
{
var _len=$("#klymk>option:selected").length;
if(_len<=0)
{
alert('请选择需要添加的模块名称!');
return;
}
else
{
$("#klymk>option:selected").each(function(){
$("#ylymk").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
var _val=$("#showbox").val(); //获得隐藏域的值
_val=_val+$(this).val()+"+"+$(this).text()+",";
$("#showbox").val(_val);
// alert("隐藏域的值的值: "+$("#showbox").val());
$(this).remove();
})
changeButtonStatus();//改变按钮状态
}
}
else
{
$(this).attr("disabled","true");
}
})
$("#item_del").click(function(){
var _all=$("#ylymk>option").length;
if(_all>0)
{
var _len=$("#ylymk>option:selected").length;
if(_len<=0)
{
alert('请选择需要移除的模块名称!');
return;
}
else
{
$("#ylymk>option:selected").each(function(){
$("#klymk").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
var _val=$("#showbox").val(); //获得隐藏域的值
var _str=$(this).val()+"+"+$(this).text()+",";
_val=_val.replace(_str,"");
$("#showbox").val(_val);
// alert("隐藏域的值的值: "+$("#showbox").val());
$(this).remove();
})
changeButtonStatus();//改变按钮状态
}
}
else
{
$(this).attr("disabled","true");
}
})
})
//删除选中的<tr/>
var deltr=function(index){
// alert("删除第 "+index+"行");
$tr=$("#tab_child tr");
var _len=$tr.length;
if(index>_len)
{
return;
}
else
{
// alert($("tr[id='"+index+"']").html());
if(confirm('您确定删除该记录吗?'))
{
$("tr[id='"+index+"']").remove(); //删除当前行
for(var i=index+1;i<_len;i++)
{
var _val=$("#para"+i).val();
$("tr[id='"+i+"']").replaceWith("<tr id='"+(i-1)+"'>"
+"<td align='center'>"+(i-1)+"<input type='checkbox' style='display:none' name='recorder"+(i-1)+"' value='"+(i-1)+"'/></td>"
+"<td align='center'><input type='text' id='para"+(i-1)+"' name='para"+(i-1)+"' value='"+_val+"' />"
+"<td align='center'><a href='#' onclick='deltr("+(i-1)+")'>删除</a></td>"
+"</tr>");
}
}
else
{
return;
}
}
}
//改变增加、移除按钮的状态
var changeButtonStatus=function()
{
var klymk_len=$("#klymk>option").length;
var ylymk_len=$("#ylymk>option").length;
//可路由模块
if(klymk_len<=0)
{
$("#item_add").attr("disabled","true");
}
else
{
$("#item_add").removeAttr("disabled");
// $("#item_add").get(0).disabled=false;
// $("#item_add")[0].disabled=false;
}
//已路由模块
if(ylymk_len<=0)
{
$("#item_del").attr("disabled","true");
}
else
{
$("#item_del").removeAttr("disabled");
}
}
</script>
</head>
<body>
<table id="tab_parent" border="1" width="80%" align="center">
<tr>
<td>输入展示</td>
<td><input type="text" id="content_show" name="content_show" size="50" value="" readonly="readonly" /></td>
</tr>
<tr>
<td>接入码</td>
<td><input type="text" id="access_id" name="access_id" /></td>
</tr>
<tr>
<td>命令字</td>
<td><input type="text" id="command_id" name="command_id" /></td>
</tr>
<tr>
<td>参数</td>
<td>
<table id="tab_child" border="1" width="100%">
<tr>
<td width="20%" align="center">序号</td>
<td align="center">参数名称</td>
<td align="center">操作</td>
</tr>
</table>
<input type="button" id="but" value="add"/>
<input type="button" id="info" value="show"/>
</td>
</tr>
</table>
<br/>
<table width="80%" cellpadding="0" align="center" class="listshow" border="1" cellspacing="0">
<tr>
<td align="center">可路由模块</td>
<td align="center"> </td>
<td align="center">已路由模块</td>
</tr>
<tr>
<td class="black" width="30%" align="center" height="150">
<select id="klymk" multiple="multiple" style="text-align:center;width:300px;height:150px;"><!-- 设置multiple属性，支持多选 -->
</select>
</td>
<td align="center" width="5%">
<input type="button" id="item_add" value="增加" />
<br/>
<br/>
<input type="button" id="item_del" value="移除" />
</td>
<td class="black" width="30%" align="center">
<select id="ylymk" multiple="multiple" style=" text-align:center;width:300px;height:150px;">
</select>
<input type="hidden" value="" id="showbox" name="showbox" />
</td>
</tr>
</table>
</body>
</html>
效果自己测试：