您的位置：首页 > Web前端 > JQuery

基于jquery框架实现以行的添加、上移、下移和删除操作

2010-01-26 18:24 549 查看

基于jquery框架实现以行的添加、上移、下移和删除操作

<!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>
<title>上海心源计算机技术有限公司--开发网站一览表</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var num = 2;
//添加账号操作
function addLi()
{
num++;
var htmls = "<li class='li3'>";
htmls = htmls + "<span class='span1'><a class='a1'>账号"+num+"：</a></span>";
htmls = htmls + "<span><a class='a1'>账号名称：</a><input type='text' class='input1' name='newName[]' /></span>";

htmls = htmls + "<span class='span2'>";
htmls = htmls + "<a class='a1'>用户名：</a><input type='text' class='input1' name='newAct[]' />";

htmls = htmls + "<a class='a3'>密码：</a><input type='text' class='input1' name='newPwd[]' /><img src='../images/share/up.bmp' onClick='UpLi(this)' title='上移'/><img src='../images/share/down.bmp' onClick='DownLi(this)' title='下移'/><img src='../images/share/plusbtn.gif' onclick='delRecord(this,0)' title='删除'/>";
htmls = htmls + "</span>";
htmls = htmls + "</li>";
$("#list").append(htmls);
}
//删除账号
function delLi(obj)
{
delLi(obj);
}

function ConcelBorder(obj)
{
$(obj).parent().parent().parent().find(".li3").each(function() {
$(this).css("border","0px");
});
}
//上移
function UpLi(obj)
{

var onthis = $(obj).parent().parent();
var getup = $(obj).parent().parent().prev();

if(getup.html()!=null&&getup.find("span").length==3)
{
ConcelBorder(obj);
$(getup).before(onthis);
$(onthis).css("border","solid 1px #acf");
$(getup).css("border","0px");
}
}
//下移
function DownLi(obj)
{
var onthis = $(obj).parent().parent();
var getdown = $(obj).parent().parent().next();
if(getdown.html()!=null&&getdown.find("span").length==3)
{
ConcelBorder(obj);
$(getdown).after(onthis);
$(onthis).css("border","solid 1px #acf");
$(getdown).css("border","0px");
}
}

</script>
<body>
<ul class="list" id="list">

<li >
<span><a class="a1">管理员账号：</a><input type="text" class="input1" name="ManagerAct" value="8888" values="管理员账号"/></span>
<span><a class="a1">密码：</a><input type="text" class="input1" name="ManagerPwd" value="8888" values="管理员密码"/><img src="../images/share/addbtn.gif" onClick="addLi()"/></span>
</li>
<li class="li3"><input type="hidden" value="2" name="Actid[]"/>
<span class="span1"><a class="a1">账号1：</a></span>
<span><a class="a1">账号名称：</a><input type="text" class="input1" value="学生" name="name[]" /></span>
<span class="span2">
<a class="a1">用户名：</a><input type="text" class="input1" value="030101" name="Act[]" />
<a class="a2">密码：</a><input type="text" class="input1" value="030101" name="Pwd[]" /><img src="../images/share/up.bmp" onClick="UpLi(this)" title="上移"/><img src="../images/share/down.bmp" onClick="DownLi(this)" title="下移"/><img src="../images/share/plusbtn.gif" onClick="delRecord(this,2)" title="删除"/>
</span>
</li>
<li class="li3"><input type="hidden" value="1" name="Actid[]"/>
<span class="span1"><a class="a1">账号2：</a></span>
<span><a class="a1">账号名称：</a><input type="text" class="input1" value="教师" name="name[]" /></span>
<span class="span2">
<a class="a1">用户名：</a><input type="text" class="input1" value="1003" name="Act[]" />
<a class="a2">密码：</a><input type="text" class="input1" value="admin" name="Pwd[]" /><img src="../images/share/up.bmp" onClick="UpLi(this)" title="上移"/><img src="../images/share/down.bmp" onClick="DownLi(this)" title="下移"/><img src="../images/share/plusbtn.gif" onClick="delRecord(this,1)" title="删除"/>
</span>
</li>
</ul>

</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航