关于jquery的clone() 方法

最新推荐文章于 2021-09-07 11:04:03 发布

转载最新推荐文章于 2021-09-07 11:04:03 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2543420/blog/644587

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现的动态添加和删除表格行的方法，适用于需要在网页上动态管理用户角色的情况，如添加管理员或普通用户，并提供了具体的JavaScript函数实现。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
//添加一个角色
function addRole(obj){
    $("#studentParent").css("display","");
    var tr=$(obj).parents("tr").clone(true);
    var value=$(obj).parents("tr").find("[name=parentType]").val();
    tr.find(".scbtn").parent().remove();
    tr.append('<td><input type="button" value="删除" class="scbtn" onclick="delRole(this)"/></td>');
    tr.find("select option[value='"+value+"']").attr("selected",true);
    $("#studentParent").append(tr);
    $(obj).parents("tr").find("[type=input]").val("");
}

//删除一个角色
function delRole(obj){
    $(obj).parents("tr").remove();
}
</script>
</head>
<body>
//用来临时存储数据
<table id="studentParent" style="display:none"></table>

<table>
<tr>
    <td>姓名：</td>
    <td><input name="parentName" type="input" class="dfinput" style="width:80px;"/></td>
    
    <td>密码：</td>
    <td><input name="mobile" type="input" class="dfinput" style="width:80px;"></td>
    
    <td>角色：</td>
    <td><select name="parentType" >
        <option value="管理员">管理员</option>
        <option value="普通用户">普通用户</option>
        </select>
    </td>
    
    <td><input type="button" value="添加" class="scbtn" onclick="addRole(this)"/></td>

</tr>
</table>

</body>
</html>

转载于:https://my.oschina.net/u/2543420/blog/644587