一下是代码：记得要用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" /> http://jquery.js <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>
[……]