Question

我试图复制带有表单的1行表，这样当我按下＆＃39; +＆＃39;按钮 - 我希望另一个表格形式完全按照它的方式下拉到它下面 - 然而，当我这样做并使用HTML代码添加与表格相同的元素时，我会得到不同的东西......

我在下面的表单中获得了屏幕截图，之后我得到了代码缩进 -

以上图片的代码如下所示 - 第一个是表格，第二个是javascript函数

    <body>
        <form>

            <div id="container1">

<table border="1" cellspacing="0" style="margin-top:12px width="900"">
<colgroup>
<col span="1">
</colgroup>
<tr>
<td valign="top">
<label for="company" size="3">Company:</label> <input type="text" id="company" name="company" maxlength="15" size="15">
</td>
<td valign="top">
<label for="position1" size="3">Position:</label> <input  type="text" id="position1" name="position1" maxlength="20" size="12"> </td> <td valign="top"><label for="tasks" size="3"> Tasks: </label></td><td> <textarea  id="tasks" name="tasks" maxlength="1000" cols="25" rows="1"></textarea></td>
<td valign="top"><label for="from1" size="3">  From: </label><input type="text" id="from1" name="from1" size="4" ></td> <td valign="top">To: <input type="text" id="to1" name="to1" size="4"> <td valign="top"><label for="location" size="3">Work Location: </label><input type="text" id="location" name="location" size="20" maxlength="25"><a href="#" id="Add1" onclick="aFields1()"> + </a><br></td>
</tr>
</table><br>               
            </div>

        </form>
    </body>

javascipt代码发布在下面：

function aFields1(){
var container1 = document.getElementById("container1");
var table = document.createElement("table");

table.border=1; 
table.cellspacing=0;
var tr = document.createElement("tr");
var td = document.createElement("td");
td.valign = "top";

var label = document.createElement("label");
label.for = "company";
label.size = 3;
container1.appendChild(document.createTextNode("Company: "));
container1.appendChild(label);

var company = document.createElement("input");
company.type = "text";

company.id = "company";
company.name = "company";
company.size = 15;
company.maxlenth = 15;
//append the company input element to the td element
td.appendChild(company);

tr.appendChild(td);
table.appendChild(tr);
//append the td element to the container1 element
//container1.appendChild(tr);   
container1.appendChild(table);

有人可以告诉我为什么桌子没有出现吗？

应该有一个边框，其中至少有一个单元格带有公司标签，输入栏位于其中 - 但正如您从图像中看到的那样，公司标签位于顶部，带边框的输入栏位于其下方。

哪里出错了？为什么单元格的边界与HTML代码的边界有很大的不同？

Answer 1

您可以简单地克隆表格行，而不是从头开始创建每个元素。我附上了一个示例，但是您可能希望在克隆之后但在追加之前更改/增加ID和名称以使它们成为唯一。我会留给你的。将来请确保正确缩进HTML和JavaScript。

仅供参考：向tbody添加ID将使其更容易选择。

        function aFields1() {
        	var lastTableRow = document.getElementsByTagName("TBODY")[0].lastElementChild;
        	var newRow = lastTableRow.cloneNode(true);
        	document.getElementsByTagName("TBODY")[0].appendChild(newRow);
        }

    <body>
        <form>

            <div id="container1">

<table border="1" cellspacing="0" style="margin-top:12px width="900"">
<colgroup>
<col span="1">
</colgroup>
<tr>
<td valign="top">
<label for="company" size="3">Company:</label> <input type="text" id="company" name="company" maxlength="15" size="15">
</td>
<td valign="top">
<label for="position1" size="3">Position:</label> <input  type="text" id="position1" name="position1" maxlength="20" size="12"> </td> <td valign="top"><label for="tasks" size="3"> Tasks: </label></td><td> <textarea  id="tasks" name="tasks" maxlength="1000" cols="25" rows="1"></textarea></td>
<td valign="top"><label for="from1" size="3">  From: </label><input type="text" id="from1" name="from1" size="4" ></td> <td valign="top">To: <input type="text" id="to1" name="to1" size="4"> <td valign="top"><label for="location" size="3">Work Location: </label><input type="text" id="location" name="location" size="20" maxlength="25"><a href="#" id="Add1" onclick="aFields1()"> + </a><br></td>
</tr>
</table><br>               
            </div>

        </form>
</body>

为什么我的桌子不出现？现在卡住了

1 个答案: