<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<style type="text/css">
.drag{
width:100px;
height:20px;
padding:5px;
margin:5px;
border:1px solid #ccc;
background:#AACCFF;
}
.over{
background:#FBEC88;
}
</style>
</head>
<body>
<table bgcolor="#00FFFF" width="500px" height="400px" cellpadding="1px">
<tr bgcolor="#999999">
<td>
<div id="source" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
<div id="d1" class="over"><input type="checkbox" name="c1"id="c1">添加权限</div>
<div id="d2" class="over"><input type="checkbox" name="c2"id="c2">删除权限</div>
<div id="d3" class="over"><input type="checkbox" name="c3"id="c3">修改权限</div>
/div>
</td>
<td>
<div id="target" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
</div>
</td>
</tr>
</table>
</body>
</html>
怎么把上边复选框选中的div 移到下面id="target"中呢 请帮帮忙
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<style type="text/css">
.drag{
width:100px;
height:20px;
padding:5px;
margin:5px;
border:1px solid #ccc;
background:#AACCFF;
}
.over{
background:#FBEC88;
}
</style>
</head>
<body>
<table bgcolor="#00FFFF" width="500px" height="400px" cellpadding="1px">
<tr bgcolor="#999999">
<td>
<div id="source" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
<div id="d1" class="over"><input type="checkbox" name="c1"id="c1">添加权限</div>
<div id="d2" class="over"><input type="checkbox" name="c2"id="c2">删除权限</div>
<div id="d3" class="over"><input type="checkbox" name="c3"id="c3">修改权限</div>
/div>
</td>
<td>
<div id="target" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
</div>
</td>
</tr>
</table>
</body>
</html>
怎么把上边复选框选中的div 移到下面id="target"中呢 请帮帮忙
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery EasyUI</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<style type="text/css">
.drag{
width:100px;
height:20px;
padding:5px;
margin:5px;
border:1px solid #ccc;
background:#AACCFF;
}
.over{
background:#FBEC88;
}
</style>
</head>
<body>
<table bgcolor="#00FFFF" width="500px" height="400px" cellpadding="1px">
<tr bgcolor="#999999">
<td>
<div id="source" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
<div id="d1" class="over"><input type="checkbox" name="c1"id="c1">添加权限</div>
<div id="d2" class="over"><input type="checkbox" name="c2"id="c2">删除权限</div>
<div id="d3" class="over"><input type="checkbox" name="c3"id="c3">修改权限</div>
/div>
</td>
<td>
<div id="target" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
</div>
</td>
</tr>
</table>
</body>
</html>
<script>
document.getElementById("target").innerHTML = document.getElementById("source").innerHTML;
</script>
1.先复制一份到target中
document.getElementById("target").innerHTML = document.getElementById("source").innerHTML;
2.再删除
var source=document.getElementById("source")
for(var i=0;i<source.childNodes.length;i++){
source.removeChild(source.childNodes[i]);
}
window.onload = function () {
var temp = $("#source").html();
$("#source").remove();
$("#target").html(temp);
};
window.onload = function () {
var temp = $("#source :checked").html();
$("#source :checked").each(function () {
$(this).remove()
});
$("#target").html(temp);
};
var temp = $("#source").html();
$("#source :checked").remove();
$("#target").html(temp).find("input:not(:checked)").remove();
};
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<style type="text/css">
.drag{
width:100px;
height:20px;
padding:5px;
margin:5px;
border:1px solid #ccc;
background:#AACCFF;
}
.over{
background:#FBEC88;
}
</style>
</head>
<body><div id="source" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
<div id="d1" class="over"><input type="checkbox" name="c1"id="c1">添加权限</div>
<div id="d2" class="over"><input type="checkbox" name="c2"id="c2">删除权限</div>
<div id="d3" class="over"><input type="checkbox" name="c3"id="c3">修改权限</div><div id="target" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;"></div>
<script type="text/javascript">
$("input[type=checkbox]").click(function() {
var me = $(this);
if(me.parent().parent().attr("id") === 'target') {
alert('已经在里面了...');
return;
}
me.parent().prependTo("#target");
});
//判断它是否选中直接使用this.checked = true 验证
</script>
</body>
</html>
//jquery
$("#source").clone().append("#target");
$("#source").empty();
$("#source").clone().prependTo("#target");
alert(document.getElementById("target").innerHTML);
$("#source").empty();