Как создать кнопку которая будет вставлять строку таблицы ниже предыдущей?

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор личных финансов</title>
    <!-- Для красоты -->
    <link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<!-- инструкция -->
<link rel="stylesheet" href="name/.Инструкция.html">
<!-- Таблицы -->
<!-- <link rel="stylesheet" href="index.html"> -->
<!-- Кнопка для добавления строки -->


</head>
<body>
    
<!-- Таблица -->
    <div class="container">
    <div class="row">
      <!-- Основа -->
      <div class="box-tablo">
        <div class="col-lg-12">
          <div class="table-responsive">
            <table class="table table-hover table-bordered">
              <thead>
                <tr>
                <th>Дата</th>
                <th>Получено</th>
                <th>Потрачено</th>
                <th>На что потрачено?</th>
                <th>Осталось</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td> <input type="date" class="form-control" autocomplete="on" ></td>
                  <th scope="row"><input type="number" class="form-control" placeholder="Сколько получил?" id="num1"></th>
                  <td><input type="number" class="form-control" placeholder="Сколько потратил?" id="num2"></td>
                  <th scope="row"><textarea class="form-control" rows="1" ></textarea></th>
                  <td> 
                    <button type="button" class="btn btn-default btn-xs" onclick="func()">========</button>
                    <p id="result"></p> 
                  </td>
                </tr>

              </tbody>
            </table>

            <script>
    function func(){
          var num1 = Number(document.getElementById("num1").value);
          var num2 = Number(document.getElementById("num2").value);
          var result = num1 - num2;

          document.getElementById("result").innerHTML = result;
          }
 </script>

          </div>
        </div>
      </div>
    </div>
  </div>
    <!-- Кнопка для создания таблицы -->
    <div class="container">
        <div class="row">
            <div class="col-lg-offset-5 col-lg-2 col-xs-offset-4 col-xs-4">
                <button class="btn btn-success btn-block">
                    <div class="str">
                    Добавить строку
                    </div>
                </button>
            </div>
        </div>
    </div>

</body>
</html>

Answer 1

Попробуй так:

html

<button class="btn id="addRow" btn-success btn-block">
    <div class="str">
        Добавить строку
    </div>
</button>

и js

// Получаем ссылки на таблицу и кнопку
const table = document.getElementById('myTable');
const addRowButton = document.getElementById('addRow');

// Обработчик клика по кнопке
addRowButton.addEventListener('click', () => {
    // Создаем новую строку
    const newRow = table.insertRow();

    // Создаем ячейки для имени и фамилии
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);

    // Задаем значения ячеек (можно получать их из формы или других источников)
    cell1.textContent = 'Новое имя';
    cell2.textContent = 'Новая фамилия';
});

У меня получилось....

БЛОГ НА HUSL

Как создать кнопку которая будет вставлять строку таблицы ниже предыдущей?

Ответы (1 шт):