Question

我有一个HTML表格，里面有一个提交按钮。现在，我在我的JavaScript文件中调用一个函数，它应该创建一个验证码，然后将它放在我有提交按钮的表格的HTML页面中。

在JavaScript中，我正在执行document.write()并将图像从JavaScript文件粘贴到HTML页面中。现在我想要这个图像并在同一个表中提交，但是提交需要在HTML页面上，并且图像必须只在JavaScript文件中。不幸的是，图像被粘贴在页面底部的某个位置。我不明白这个定位是如何工作的。是否有任何解决方案，我可以将它们放在同一个表中，尽管两个控件都在单独的文件中？

示例代码：

HTML页面中的

：提交按钮放在表单标签...

中的表格内

在JavaScript文件中：

document.write("img position=\"relative\" src=\"" + decodeURIComponent(imgdir) + imgid + ".jpg\" height=\"50\" width=\"100\" align=\"left\" style=\"margin-left: 4px;\" height=\"80\");
}

Answer 1

您可以尝试在表格中定义html img标记，并将其隐藏在css样式中，直到您使用javascript设置源代码。您还需要在其上设置ID以便在javascript中进行访问。

在表格中，您可以像这样定义html表格单元格：

<td>
  <!-- Your submit button goes here... --> 
  <img id="imagePlaceholder" style="display:none;margin-left:4px;" height="50" width="100" align="left" /> 
</td>

在javascript中你这样做：

var image = document.getElementById("imagePlaceholder");
image.src = decodeURIComponent(imgdir) + imgid + ".jpg" ;
image.style.display = "inline";  // Make the image tag visible

Answer 2

除了之前的评论之外，我强烈避免使用document.write，因为它很容易滥用HTML的语义。我建议总是使用innerHTML来编写元素并动态填充它们。 innerHTML不是标准，但它比使用DOM方法快2.5到3.5倍。我还强烈建议您验证动态生成的HTML，以发现JavaScript引入的漏洞。

Answer 3

document.write()将HTML附加到页面末尾。您可能希望使用appendChild()之类的内容将图像插入到右表格单元格中。例如：

var img = document.createElement('img');
img.src = decodeURIComponent(imgdir) + '.jpg';
// set the rest of the attributes...
var imgTd = document.getElementsById('imgDestination');
imgTd.appendChild(img);

一些建议：

使用像jQuery这样的JavaScript库 - 它会让这样的事情变得微不足道。
将图像的样式移出元素并转移到<style>元素或外部CSS文件中。

在HTML表格中定位

3 个答案: