0 
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <title>Javascript Create Div Element Dynamically</title>

    <style type="text/css">
.ex
{
width:200px;
position: relative;
background-color :#CCC;
height:150px;
padding:10px;
margin:5px;
left-margin:0px;
float :left;
}
#newdiv
{
    width:800px;
    height:800px;
 border:1px solid #000;     
}
.border
{
 border:1px solid #000; 
}

    </style>
<script>

image.cc=1;
function changeimage(image)
{
if (image.cc==0) 
  {
  image.cc=1;
  $(image).attr('src', 'images/white_contact.png');
  }
else if (image.cc==1)
  {
  image.cc=2;
  $(image).attr('src', 'images/yellow_contact.png');
  }
  else if (image.cc==2)
  {
  image.cc=3;
    $(image).attr('src', 'images/green_contact.png');
  }
    else
  {
  image.cc=0;
    $(image).attr('src', 'images/red_contact.png');
  }
}
</script>
 <script type="text/javascript" language="javascript">
var i=0;
    function createDiv()
    {


  if(i < 6) {
        var divTag = document.createElement("div");
        divTag.id = "div"+i;
        divTag.setAttribute("align","left");
        divTag.style.margin = "0px auto";
        divTag.className ="ex";
       divTag.innerHTML = "<img class='myimage' onclick='changeimage(this)' border='0' src='images/white_contact.png' width='60'/>";

        document.getElementById("newdiv").appendChild(divTag)

      }

   i++;
   $( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6});
 $( ".ex" ).droppable({ hoverClass:'border' });

    }





    </script>
</head>
<body>

    <p align="left">
        <b>Click this button to create div element dynamically:</b>
        <input id="btn1" type="button" value="create div" onClick="createDiv();" />

        <div id = "newdiv">

</div>
    </p>

</body>
</html>

我设法在每个 div 中创建了 6 个具有不同图像属性的 div。

我想在我的每个 divtag 中添加表格也将它放在我的图像旁边，但我意识到我不能只在图像旁边附加表格。如何在里面添加表格

我也想在表格中添加文本和文本框。

我的桌子是这样的

<table border='0'><tr>
<td>Name:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Title:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Contact:</td>
<td><input type="text"></td>
</tr>
</table>
4

2 回答 2

0

  • 有多种方法可以将对象彼此相邻放置。举个例子，$(yourNewObj).find('*').css({"float":"left"});

  • 要动态创建新元素，您可以执行以下示例：

    $myTable = $("<table />").attr({"id":"foo","class":"bar"}).css({"display":"block","width":"30%","float":"left"});
$firstTR = $myTable.append("<tr />");
/* ... */    
$myTable.append($firstTR);
/* ... */
yournewObj.append($myTable);
于 2013-05-28T02:51:52.207 回答
0

我的建议是阅读 jQuery 提供的一些方法——它会让你所做的很多事情变得更容易。例如，您可以<div/>使用如下代码创建您的 s：

$('#newdiv').append('<div id="div"'+i+'" class="ex" style="text-align: left;"><img class="myimage" onclick="changeimage(this)" border="0" src="images/white_contact.png" width="60"/></div>');`

创建后，您可以以相同的方式附加您的表格 HTML。

$('#newdiv').find('#div'+i).append('<table border="0"><tr>'+
    '<td>Name:</td>'+
    '<td><input type="text"></td>'+
  '</tr><tr>'+
    '<td>Title:</td>'+
    '<td><input type="text"></td>'+
  '</tr>'+
  '<tr>'+
    '<td>Contact:</td>'+
    '<td><input type="text"></td>'+
  '</tr>'+
'</table>');

如果这是针对一个项目，而不仅仅是尝试学习如何使用 JS 动态生成事物，那么最好不要使用 JavaScript 生成太多视图。最好在单独的 CSS 样式表中指定样式，并且如果可能的话，使用模板（示例）编写 HTML 和/或在后端生成它。

而不是divTag.style.margin = "0px auto";你可以简单地做$('#div1').css('margin', '0px auto');. 这对于您可能需要使用 jQuery 设置的任何 CSS 都是如此，但尽可能在样式表中进行设置。

您需要使用 CSS 使表格显示在图像旁边，而不是在图像下方。应用于两者（图像和表格）的 CSS float:left 属性可能会起到作用。

于 2013-05-28T02:51:58.927 回答