JavaScript在HTML中创建新行，onclick将值粘贴在另一个的下面

JavaScript creating new line in HTML, onclick pastes values underneath one another

本文关键字：另一个 onclick HTML 创建 新行 JavaScript      更新时间：2023-09-26

所以我在网站上看了很多，但似乎找不到最基本的方式来通过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()，但我将在我的下一个项目中实现它。

任何帮助将不胜感激!提前感谢:)

在你的JavaScript中，使用+=来追加，而不是=来覆盖:

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