在内部插入div<；td>；使用javascript

注意：此项目的后端与Laravel一起工作

您好，我正在尝试制作一个javascript函数，它允许我复制一个

，并将它的子节点插入

，这样最终，我可以使用POST方法将表数据保存到数据库中

以下是我迄今为止的工作：

function newRow(id) {
    //Copy all child nodes of element with ID copyRow
    var newRow = document.getElementById('copyRow').cloneNode(true).childNodes;
    
    //Make a new element of type <tr class="product_subcategory"> </tr>
    var rowTag = document.createElement('TR');
    rowTag.className = "product_subcategory";

    //Find div where we want to add element
    document.getElementById(id).appendChild(rowTag);

    //Add all childNodes to <td>, and then to <tr>
    newRow.forEach(element => {
        var data = document.createElement('TD');
        data.appendChild(element);

        rowTag.appendChild(data);
    });
}

函数newRow（id）{
//复制ID为copyRow的元素的所有子节点
var newRow=document.getElementById（'copyRow'）.cloneNode（true）.childNodes；
//制作一个新的类型元素
var rowTag=document.createElement（'TR'）；
rowTag.className=“产品\子类别”；
//查找要添加元素的div
document.getElementById（id）.appendChild（rowTag）；
//将所有子节点添加到，然后添加到
newRow.forEach（元素=>{
var data=document.createElement（'TD'）；
数据。子元素（元素）；
rowTag.appendChild（数据）；
});
}

这是我要复制的

：

<div id="copyRow" style="display: none">
<tr class="product_subcategory">
    <td scope="row"><input class="product_subcategory_name form-control" type="text" placeholder="Type Name"></td>
    <td>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text text-muted">€</span>
            </div>
            <input name="price" id="price" class="product_subcategory_price form-control" type="number" value="0" onchange="calculateTotalPrice()" min="0" step="0.01" class="form-control @error('price') eshte jo valide @enderror" value="{{ old('price') }}" autocomplete="off" required>
        </div>
    </td>
    <td><input class="product_subcategory_amount form-control" type="number" value="1" min="1"></td>
    <td>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text text-muted">€</span>
            </div>
            <input class="product_subcategory_total form-control" value="10" disabled>
        </div>
    </td>
</tr>

€
€

---

执行此js代码后，一个新的

添加到表中，然后添加五个不同的空

（表数据标记）。我想要的是新的

，具有id=“copyRow”

的div的所有子节点，似乎您正在尝试使用

的内容作为模板。
更新：如果您正试图这样做，则不要使用div。任何“特殊”标记，如
和
，都不能存在于表外。但是它们可以存在于表之外的
标记中

步骤1：用模板元素替换div。
因此，与其
执行<代码>

步骤2：调整newRow方法
步骤3：完成
在那里，没有必要弄乱循环或其他东西

另见：

您似乎试图使用
的内容作为模板。
更新：如果您正试图这样做，则不要使用div。任何“特殊”标记，如
和
，都不能存在于表外。但是它们可以存在于表之外的
标记中

步骤1：用模板元素替换div。
因此，与其
执行<代码>

步骤2：调整newRow方法
步骤3：完成
在那里，没有必要弄乱循环或其他东西

另见：

您显示的
div
不完整。我想在你展示的内容之后会有一个结束语
？您能否显示HTML的前后内容，并显示您想要的结果？乍一看，它看起来像是您的
newRow。forEach
循环正在插入
tr
元素作为
td
元素的子元素，这与应该的相反。是的，它有closing div标记，我无意中没有复制它。似乎我无法将所有代码粘贴到注释中，所以请使用此链接查看它。我要做的是JS代码是用DIV的所有子节点做新的，ID＝“CopeRew”也考虑我对你的代码>前缀循环的评论。这跟拉威尔到底有什么关系？我还是有点不确定你想做什么
td
元素仅作为
tr
元素的直接子元素有意义，而
tr
元素仅作为
tbody
或
table
元素的直接子元素有意义。正如我在第一篇评论中所问的，如果您能在HTML前后显示示例，这将有助于理解问题。您显示的
div
不完整。我想在你展示的内容之后会有一个结束语
？您能否显示HTML的前后内容，并显示您想要的结果？乍一看，它看起来像是您的
newRow。forEach
循环正在插入
tr
元素作为
td
元素的子元素，这与应该的相反。是的，它有closing div标记，我无意中没有复制它。似乎我无法将所有代码粘贴到注释中，所以请使用此链接查看它。我要做的是JS代码是用DIV的所有子节点做新的，ID＝“CopeRew”也考虑我对你的代码>前缀循环的评论。这跟拉威尔到底有什么关系？我还是有点不确定你想做什么
td
元素仅作为
tr
元素的直接子元素有意义，而
tr
元素仅作为
tbody
或
table
元素的直接子元素有意义。正如我在第一篇评论中所问的，如果您能在HTML前后显示示例，这将有助于理解问题。正如您所建议的，更改了代码，但是现在方法什么都不做。控制台中没有错误，甚至没有向表中添加任何内容。没什么变化谢谢你，伙计。这让我发疯。最后，正如您所建议的，它正在处理更改后的代码，但现在该方法什么也不做。控制台中没有错误，甚至没有向表中添加任何内容。没什么变化谢谢你，伙计。这让我发疯。它终于开始工作了
function newRow(id) {
  //Find the template
  var template = document.getElementById('copyRow');
  
  //Clone it's contents
  var newRow = template.content.cloneNode(true);
  
  //Find the table where the contents will be added
  var target = document.getElementById(id);
  
  //Append the new row
  target.appendChild(newRow);
}