使用Jquery将我页面上的div插入到我页面的另一部分

时间:2010-12-08 13:33:59

标签: javascript jquery jquery-ui

我将举一个简单的例子说明我想做什么。

我有这张桌子。静态的。我有五个按钮和五个相应的div。当我点击按钮时,我希望将表放在相应的div中。

等等。

$("#button1").button().click($("#div1").append($("#mytable"));

等等。可以这样做吗?怎么样?

另外,请告诉我是否有更好的方法,如果我试图重新发明轮子或类似的东西...

WORKING:

我最终使用的代码,基于解决方案:

$("#test").button().click(function() { $("#test2").append($("#table_EditInformation")); });

测试是一个按钮 test2是一个div table_EditInforation显然是一个表

3 个答案:

答案 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函数,否则这是不可能的。