Question

所以我浏览了很多网站，但似乎找不到最基本的方式来通过JavaScript在HTML中创建新行。这将通过一个onclick按钮激活，该按钮将复制表中的结果并将它们发布在单独的div中。理想情况下，“添加行”按钮不会与创建的每个新行一起复制。相反，我有一个按钮，每次按下，将从表中取值，并使所有值的文本出现（不在另一个表中）。复制新值后，不会替换此值的连接;新值将粘贴在下面。

这就是我一直在尝试的：

HTML：

<table>
    <tr id="row4">
        <td>
            Result:
        </td>
        <td>
            <input type="text" placeholder="00" name="row4" class="row" id="row3_1"/>
        </td> 
        <td>
            <input type="text" placeholder="00" name="row4" class="row" id="row3_2"/>
        </td> 
        <td>
            <input type="text" placeholder="00" name="row4" class="row" id="row3_3"/>
        </td> 
        <td>
            <input type="text" placeholder="00" name="row4" class="row" id="row3_4"/>
        </td>
    </tr>
</table>

<input type="button" id="postToClipboard" onclick="postToClipboard()" value="Post results!">
<div id="clipboard"></div>

JavaScript的：

function postToClipboard() {
    document.getElementById("clipboard").innerHTML = '<p>' + "Final Time =  " + (arrayRow3[0]  || 00) + ":" + (arrayRow3[1] || 00) + ":" + (arrayRow3[2] || 00) + ":" + (arrayRow3[3] || 00) + '</p>';
}

我最近了解了join（），但我将在下一个项目中实现它。

任何帮助将不胜感激！在此先感谢：）

Answer 1

在您的JavaScript中，使用+=附加，而不是=来覆盖：

function postToClipboard() {
    document.getElementById("clipboard").innerHTML += '<p>' + "Final Time =  " + (arrayRow3[0]  || 00) + ":" + (arrayRow3[1] || 00) + ":" + (arrayRow3[2] || 00) + ":" + (arrayRow3[3] || 00) + '</p>';
}

JavaScript在HTML中创建新行，onclick将值互相粘贴在一起

1 个答案: