Question

我想创建一个表单来添加带有标题的多个图像。我是php和mysql的人。因此，如果我可以在点击addmore上获得新字段，那么我可以做其余的php mysql部分。如何设置var x以创建新行以提供新的浏览按钮和标题文本字段。

<script type="text/javascript">
<!--
function addMore() {
if (document.getElementById && document.createElement) {
    var x = ;
    document.getElementById('inserthere').appendChild(x);
}
else alert('Your browser doesn\'t support the Level 1 DOM');
}

function delMore() {
if (document.getElementById && document.createElement) {
    var node = document.getElementById('inserthere')
    node.removeChild(node.childNodes[0]);
}
else alert('Your browser doesn\'t support the Level 1 DOM');
}
// -->
</script>

</head>

<body>
<table>
<tr><td>Select Image<input type="file" name="img[]" id="img"  /></td><td>Add caption
<input type="text" name="img_cap[]" id="img_cap" /></td>
</tr>
<span id="inserthere"></span>
</table>

<a href="javascript:addMore()" class="page">add More</a><br />
<a href="javascript:delMore()" class="page">remove</a>

</body>

直到有人回复我将要学习，探索互联网并尝试尝试尝试.....

Answer 1

这不是最漂亮的方式，但最简单，最快捷的方式可能是为表格提供id属性（例如，'imgtable'），并在addMore()中执行以下操作功能：

var x = document.createElement('tr'); // create a new row ready to add
x.innerHTML = '<td>Select Image<input type="file" name="img[]" id="img"  /></td><td>Add caption <input type="text" name="img_cap[]" id="img_cap" /></td>'; // fill it with your code
document.getElementById('imgtable').appendChild(x) // add the new row to the table

如果您想了解更多信息，请务必查找类似document.createDocumentFragment()的方法，作为在将对象实际添加到DOM之前将单独声明的元素附加到对象的方法。我使用的innerHTML方法可以更快，但它不是那么整洁，而且比声明文档片段更难调试。

希望这有帮助。

使用javascript添加删除html元素

1 个答案: