为什么这段 JavaScript 会重复？

Question

我正在尝试创建一个发票系统。我有以下代码：

function addRow() {

  var table = document.getElementById("invoiceTable"),

    rIndex, cIndex;

  for (var i = 0; i < table.rows.length; i++) {

    for (var j = 0; j < table.rows[i].cells.length; j++) {

      table.rows[i].cells[j].onclick = function() {

        rIndex = this.parentElement.rowIndex + 1;

        cIndex = this.cellindex + 1;

        document.getElementById("invoiceTable").insertRow(rIndex).innerHTML = `<tr>

          <td><div contenteditable></div></td>

          <td><div contenteditable></div></td>

          <td><div contenteditable></div></td>

          <td><div contenteditable></div></td>

          <td><div contenteditable></div></td>

          <td>

            <div>

              <button

                type="button"

                name="button"

                onclick="addRow()"

                style="background-color: Transparent; border: none; color: green;"

              >

                <i class="fas fa-plus-circle"></i>

              </button>

            </div>

          </td>

        </tr>`;

      }

    }

  }

}

<!-- Font Awesome CDN -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<!-- Bootstrap CSS/CDN -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<main role="main">

  <div class="container">

    <div class="row">

      <div class="col-md-12 mt-5">

        <table class="table thead-dark table-hover border-bottom" id="invoiceTable">

现在这工作正常，但在我单击按钮添加行后出现问题。单击按钮后，只需单击按钮所在的行即可添加另一行。此外，单击标题会在单击按钮后添加行。我很确定我需要告诉脚本停止做事，但就 JS 而言，我充其量是个新手，所以我不知道如何做。有任何想法吗？

Answer 1

invoiceTableHTML 是相同的，但如果您愿意，可以删除id 。JS：function addRow() {var tbody = document.querySelector("tbody")tbody.innerHTML +=&nbsp; &nbsp; '<tr>' +&nbsp; &nbsp; &nbsp; &nbsp; '<td><div contenteditable></div></td>' +&nbsp; &nbsp; &nbsp; &nbsp; '<td><div contenteditable></div></td>' +&nbsp; &nbsp; &nbsp; &nbsp; '<td><div contenteditable></div></td>' +&nbsp; &nbsp; &nbsp; &nbsp; '<td><div contenteditable></div></td>' +&nbsp; &nbsp; &nbsp; &nbsp; '<td><div contenteditable></div></td>' +&nbsp; &nbsp; &nbsp; &nbsp; '<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'; +&nbsp; &nbsp; '</tr>';}因为我没有看到循环每个元素的意义，所以我只是直接扩展了新行。+ 按钮仍会在最后创建一行，但其他任何操作都不会。这是想要的吗？

Answer 2

table.rows.length将选择所有内容rows，包括具有 的行th。相反，仅选择tbody trs.function addRow() {&nbsp; var table = document.querySelector("tbody"),&nbsp; &nbsp; rIndex, cIndex;&nbsp; for (var i = 0; i < table.rows.length; i++) {&nbsp; &nbsp; //&nbsp; &nbsp;console.log(table.rows[i].cells);&nbsp; &nbsp; for (var j = 0; j < table.rows[i].cells.length; j++) {&nbsp; &nbsp; &nbsp; table.rows[i].cells[j].onclick = function() {&nbsp; &nbsp; &nbsp; &nbsp; rIndex = this.parentElement.rowIndex + 1;&nbsp; &nbsp; &nbsp; &nbsp; cIndex = this.cellindex + 1;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("invoiceTable").insertRow(rIndex).innerHTML = '' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<tr>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<td><div contenteditable></div></td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<td><div contenteditable></div></td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<td><div contenteditable></div></td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<td><div contenteditable></div></td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<td><div contenteditable></div></td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'; +&nbsp; &nbsp; &nbsp; &nbsp; '</tr>'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }}<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/><main role="main">&nbsp; <div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="col-md-12 mt-5">&nbsp; &nbsp; &nbsp; &nbsp; <table class="table thead-dark table-hover border-bottom" id="invoiceTable">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th style="width: 10%">Item</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th style="width: 50%">Description</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th style="width: 5%">Qty</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th style="width: 10%">Price</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th style="width: 10%">Amount</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th style=>Action</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div contenteditable></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div contenteditable></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div contenteditable></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div contenteditable></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div contenteditable></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="fas fa-plus-circle"></i></button></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></main><!-- /role main -->