我将举一个简单的例子说明我想做什么。
我有这张桌子。静态的。我有五个按钮和五个相应的div。当我点击按钮时,我希望将表放在相应的div中。
等等。$("#button1").button().click($("#div1").append($("#mytable"));
等等。可以这样做吗?怎么样?
另外,请告诉我是否有更好的方法,如果我试图重新发明轮子或类似的东西...
WORKING:
我最终使用的代码,基于解决方案:
$("#test").button().click(function() { $("#test2").append($("#table_EditInformation")); });
测试是一个按钮 test2是一个div table_EditInforation显然是一个表
答案 0 :(得分:4)
对于一个工作示例,将下面的html / js复制到“index.html”或任何.html文件中并试用。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$("#button1").click(function () {
$("#div1").empty().append($("#mytable"));
});
});
</script>
</head>
<body>
<a href="#" id="button1">the link or button to be pressed</a>
<div id="div1">
<p>stuff should be put here</p>
</div>
<table id="mytable">
<tr>
<td>put my table in the div please! </td>
</tr>
</table>
</body>
</html>
普通的javascript代码如下:
$("#button1").click(function () {
$("#div1").append($("#mytable"));
});
请记住,id为$(“#mytable”)的元素必须位于同一个dom树中。
你也可以在.append()之前使用.empty()来清空#div的内容
像这样: $("#button1").click(function () {
$("#div1").empty().append($("#mytable"));
});
查看此处的文档jquery.html()
答案 1 :(得分:1)
$("#button1").click(function(){
$("#div1").append($("#mytable"));
});
应该为你做的
答案 2 :(得分:1)
function appendTableTo(divId) {
$('#mytable')
.remove() // take the table out of whatever div it's in
.appendTo(divId); // and place it into the right div
}
function addHandler(buttonId, divId) {
$(buttonId).button().click(
function(divId){
return function(){
appendTableTo($(divId));
};
}(divId)
);
}
addHandler('#button1', '#div1');
addHandler('#button2', '#div2');
addHandler('#button3', '#div3');
addHandler('#button4', '#div4');
addHandler('#button5', '#div5');
这应该这样做。我们只有一个追加函数将表放入正确的div中。此外,我们有一个函数将此单击处理程序附加到按钮。我们称之为五次。
addHandler函数使用闭包。这是必要的,因为我们需要将参数传递给appendTableTo函数,否则这是不可能的。