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

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

javascript jquery jquery-ui

Javascript 使用Jquery将页面上的div插入到页面的另一部分,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我将举一个简单的例子来说明我想做什么我有这张桌子。静止的我有五个按钮和五个相应的div。当我点击按钮时，我希望表格被放置在相应的分区中差不多 $("#button1").button().click($("#div1").append($("#mytable")); 等等。这能做到吗？怎么做另外，请告诉我是否有更好的方法来做到这一点，如果我试图重新发明车轮或类似的东西工作：我最终使用的代码基于以下解决方案： $("#test").button().click(function() {

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

我有这张桌子。静止的我有五个按钮和五个相应的div。当我点击按钮时，我希望表格被放置在相应的分区中

差不多

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

等等。这能做到吗？怎么做

另外，请告诉我是否有更好的方法来做到这一点，如果我试图重新发明车轮或类似的东西

工作：

我最终使用的代码基于以下解决方案：

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

测试是一个按钮 test2是一个div

table_EditInformation显然是一个表，对于一个工作示例，请将下面的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>

请记住，id为$（“#mytable”）的元素必须位于同一dom树中

也可以在.append（）之前使用.empty（）清空#div的内容

像这样：

  $("#button1").click(function () {
     $("#div1").empty().append($("#mytable"));
   });

查看此处的文档

以获取一个工作示例，将下面的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>

请记住，id为$（“#mytable”）的元素必须位于同一dom树中

也可以在.append（）之前使用.empty（）清空#div的内容

像这样：

  $("#button1").click(function () {
     $("#div1").empty().append($("#mytable"));
   });

请检查此处的文档

我应该为你做

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');

我应该为你做

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');

这应该可以做到。我们只有一个append函数将表放入右div。此外，我们还有一个函数将这个click处理程序附加到按钮。我们称之为五次

addHandler函数使用闭包。这是必要的，因为我们需要将参数传递给appendTableTo函数，否则这是不可能的

这应该可以做到。我们只有一个append函数将表放入右div。此外，我们还有一个函数将这个click处理程序附加到按钮。我们称之为五次

addHandler函数使用闭包。这是必要的，因为我们需要向appendTableTo函数传递一个参数，否则这是不可能的。

我应该注意，我不想在页面上放置5个表副本，每个div中一个，并在单击按钮时隐藏/显示，即使我知道它会工作。我应该注意，我不想在页面上放置5份表格副本，每个div中一份，并在单击按钮时隐藏/显示，即使我知道它会工作。+1，这也可以改进，以找到按钮的父div，从而节省硬编码id的需要，但这只是一个额外的好处。：）看来我的主要问题是我没有说。html（）不，我只是很愚蠢。我没有把#放在桌名前面。。。哇，我是个白痴。那么，放置.html（）和不放置它有什么区别呢？我似乎得到了同样的效果？哦，谢谢你给我关于空的提示我也需要它！是的，您基本上只得到id为“mytable”的元素，但您没有对它做任何操作。您需要“mytable”和“mytable”中的所有元素，实际上您只需要$（“mytable”）就可以了$（“mytable”）.html（）将仅获取包含的html标记，而不包含父项。因此，它将不包括表标记。我已经在上面更正了它。+1，这也可以改进，以找到按钮的父DIV，从而省去了硬编码id的需要，但这只是一个额外的好处。：）看来我的主要问题是我没有说。html（）不，我只是很愚蠢。我没有把#放在桌名前面。。。哇，我是个白痴。那么，放置.html（）和不放置它有什么区别呢？我似乎得到了同样的效果？哦，谢谢你给我关于空的提示我也需要它！是的，您基本上只得到id为“mytable”的元素，但您没有对它做任何操作。您需要“mytable”和“mytable”中的所有元素，实际上您只需要$（“mytable”）就可以了$（“mytable”）.html（）将仅获取包含的html标记，而不包含父项。因此，它将不包括表标记。我已经在上面更正了。我真的很喜欢这个解决方案。也许我可以对类做一些事情，这样我就不必每次都重复addHandler。让所有按钮都具有相同的class=“myclass”，然后使用.myclass将处理程序添加到everythinge。。。这对我的情况非常有利。使用类的困难在于将div与按钮相关联。您还可以使用循环：for（var i=1；i，除非您将div和按钮包装到另一个div中。您可以在按钮单击say.parent（）.children（“div”）或类似的内容时获取div。将class=“myTestDiv”添加到outerdiv，并将class=“myTableDiv”添加到内部div。然后，单击按钮时执行类似$（此）的操作。parents(“.myTestDiv”）.chilren（“.myTableDiv”）.append（“#myTable”）。我认为这应该行得通。是的，这是一个好主意。然后你真的只需要使用一个类调用一次。我真的很喜欢这个解决方案。也许我可以对类做一些事情，这样我就不必每次都重复addHandler。按钮是否都具有相同的class=“myclass”“然后将处理程序添加到带有.myclass的Everything中……这对我的情况非常有利。使用类的困难在于将div与按钮相关联。您还可以使用循环：for（var i=1；i），除非您将div和按钮包装到另一个div中。当按钮单击saying.parent（）.children（“div”）时，您可以获得该div。”或者类似的东西。将class=“myTestDiv”添加到outerdiv，将class=“myTableDiv”添加到内部div。然后单击按钮时，执行类似$（this）的操作。parents（“.myTestDiv”）。chilren（.myTableDiv”）。append（“#myTable”）。我认为这应该可以实现。是的，这是一个好主意。然后，使用一个类只需要一个调用。