Почему это javascript повторяется? - PullRequest
Новая
       4

Почему это javascript повторяется?

0 голосов
/ 10 апреля 2020

Я пытаюсь создать систему счетов. У меня есть следующий код: 

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

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

Теперь это работает нормально, но проблема возникает после того, как я нажимаю кнопку, чтобы добавить строку. Как только кнопка нажата, простое нажатие на строку, в которой находилась кнопка, добавит еще одну строку. Кроме того, нажатие в заголовке добавляет строку после нажатия кнопки. Я почти уверен, что должен сказать сценарию прекратить делать что-то, но я в лучшем случае новичок в том, что касается JS, так что я не знаю как. Есть идеи?

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

HTML то же самое, но идентификатор invoiceTable может быть удален, если вы будете sh.

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

Поскольку я не сделал вижу смысл зацикливания каждого элемента, я просто непосредственно расширил новую строку. Кнопка + все равно создаст строку в самом конце, но больше ничего не делает. Это желательно?

0 голосов
/ 10 апреля 2020

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