jquery 实现加两行输入框表格实现自动路由功能

一下是代码:记得要用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">&nbsp;&nbsp;</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>

效果自己测试:

发表评论

电子邮件地址不会被公开。 必填项已用*标注