如何解决我的桌子的这个问题？答案

【问题标题】：How can I fix this issue with my table?如何解决我的桌子的这个问题？
【发布时间】：2015-03-21 18:57:44
【问题描述】：

我正在尝试使用表格复制一个单排表格，这样当我按下“+”按钮时 - 我希望另一个表格表格完全按照它的方式下拉到它下方 - 但是，当我这样做时并使用 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 代码的边框有很大不同？

【问题讨论】：

每次用户按下“+”时他们都会看到添加了一个新表的期望行为吗？还是只是将新的 TR 添加到现有表中？
使用您当前的代码，您可以制作更多表格。您是要扩展原始表格还是制作大量单行表格？
一个新的 tr 添加到现有表中 - 只是一个额外的一行表 - 我更喜欢添加一个新的 TR
什么更好？一个扩展表还是一大堆单行表？
只是扩展当前表...节省了大量的空白

标签： html-table position label border cell

【解决方案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);
}

【讨论】：

那我该怎么办？
我做到了...到目前为止还没有任何变化
有人愿意帮忙吗？
我用一个可能的解决方案编辑了我的答案。我没有在浏览器中测试它，所以可能有错字。它提供了解决问题的一种方法的总体思路。
它不起作用...你能再检查一下我的代码吗？我尝试了你要求的方法......失败了