如何使用JavaScript添加行？_Javascript_Html

如何使用JavaScript添加行？

javascript html

如何使用JavaScript添加行？,javascript,html,Javascript,Html,我最近开始编写代码，并尝试使用HTML、CSS和JavaScript构建一个费用应用程序。我正在创建一个这是我的HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="

我最近开始编写代码，并尝试使用HTML、CSS和JavaScript构建一个费用应用程序。我正在创建一个

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Expense Tracker</title>
</head>
<body>
    <h1>Expense Tracker</h1>
    
    <div id="myDiv">
        <label for="name">Name:</label>
        <input type="text" name="myInput" id="myInput" placeholder="Name of expense" size="50"><br><br>
        <label for="date">Date:</label>
        <input type="date" id="myDate" name="myDate">
        <label for="amount">Amount:</label>
        <input type="text" name="myAmount" id="myAmount" placeholder="Dollar amount ($)"><br><br>
        <span onclick="addRow()" class="addBtn">Add Expense</span>
    </div>
    <br>
    <table id="myTable">
      <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Delete</th>
      </tr>
      <tr>
        <td>McDonald's</td>
        <td>6/22/2017</td>
        <td>$12.00</td>
        <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
      </tr>
     </table>
    

    <script src="script.js"></script>
</body>
</html>

如何使用JavaScript添加其他行？我可以使用上面的JavaScript代码删除行，但我很难弄清楚如何添加新元素。

您需要通过DOM操作来完成这项工作。像这样的东西应该有用

<button type="button" onclick="myFunction()">New row</button>

<button type="button" onclick="myFunction()">New row</button>

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}