为什么这段 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 +=

    '<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>';

}

因为我没有看到循环每个元素的意义，所以我只是直接扩展了新行。+ 按钮仍会在最后创建一行，但其他任何操作都不会。这是想要的吗？

Answer 2

table.rows.length将选择所有内容rows，包括具有 的行th。相反，仅选择tbody trs.

function addRow() {

  var table = document.querySelector("tbody"),

    rIndex, cIndex;

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

    //   console.log(table.rows[i].cells);

    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>'

      }

    }

  }

}

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>

<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">

          <thead>

            <tr>

              <th style="width: 10%">Item</th>

              <th style="width: 50%">Description</th>

              <th style="width: 5%">Qty</th>

              <th style="width: 10%">Price</th>

              <th style="width: 10%">Amount</th>

              <th style=>Action</th>

            </tr>

          </thead>

          <tbody>

            <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>

          </tbody>

        </table>

      </div>

    </div>

  </div>

</main>

<!-- /role main -->