Question

我正在尝试使用表单复制一个带有划线的表格，这样当我按下“+”按钮时 - 我希望另一个表格形式完全按照它的方式下拉到它下面 - 但是，当我这样做时并且使用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;

//将公司输入元素附加到td元素 td.appendChild（公司）;

tr.appendChild(td);
table.appendChild(tr);

//将td元素附加到container1元素

//container1.appendChild(tr);   
container1.appendChild(table);

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

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

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

Answer 1

部分问题在于您将label元素直接附加到DIV，而不是将其附加到新td。这就是它出现在桌子之外的原因。

从您上次发表的评论来看，您真正想要做的似乎只是将克隆的TR附加到现有表中。好的，有多种方法可以做到这一点。您可以在javascript中完全重建一个重复的tr，或者您可以克隆第一个表行并将其附加到表中。这对于jQuery来说是微不足道的，但可以使用纯javascript来完成。

首先，让我们在表格元素中添加id属性。像这样：

<table id="my_table" border="1" cellspacing="0" style="margin-top:12px;width:900px">
.....snip rest of your table....
</table>

然后您的javascript克隆可以像这样工作（注意：代码未经测试）：

function aFields1() {
    var table, tr, cloned_row, inputs_to_clear;

    // find the table
    table = document.getElementById('my_table');

    // find the first tr element
    tr = table.querySelectorAll('tr')[0];

    // clone the first tr using deep = true option to copy all children
    tr_cloned = tr.cloneNode(true);

    // NOTE: the values in the cloned row will already be prefilled, so you probably want to clear input-field values as well
    inputs_to_clear = tr_cloned.querySelectorAll('input');
    foreach (var input in inputs_to_clear) {
        inputs_to_clear[input].value = '';
    }

    // append the new row
    table.appendChild(cloned_row);
}

如何用我的表解决这个问题？

1 个答案: