table.insertRow из кнопки в таблице не работает - PullRequest
Новая
       6

table.insertRow из кнопки в таблице не работает

0 голосов
/ 03 июля 2018

Почему кнопка «proba2» добавляет строку в таблицу, а кнопка «Вставить», которая находится в таблице, - добавляет строку, которая исчезает в конце функции?

Мой код: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Parameter AutoCgen</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    table,
    th,
    td {
      padding: 10pt;
      border-style: solid;
      border-width: 1pt;
      border-collapse: collapse;
      text-align: center;
      white-space: nowrap;
      margin: auto;
    }
    
    table {
      width: auto;
    }
    
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    
    input[type=text] {
      background-color: transparent;
      border-width: 0px;
    }
  </style>
  <script>
    'use strict';

    var proba = function() {
      for (var r of document.getElementsByTagName('table')[0].rows)
        for (var d of r.cells) console.log(d.innerHTML);
    }

    var ins_after = function(obj) {
      obj = obj || window.event;
      var r = document.getElementsByTagName('table')[0].insertRow(obj.parentNode.parentNode.rowIndex);
      var c1 = r.insertCell(0);
      var c2 = r.insertCell(1);
      var c3 = r.insertCell(2);
      c1.innerHTML = 'drugo_ne6to';
      alert(c1);
    }
  </script>
</head>

<body>
  <form>
    <table>
      <caption style='font-size: 1.5em;'>Parameters list</caption>
      <tr>
        <th>Insert after</th>
        <th>Delete</th>
        <th>Parameter name</th>
      </tr>
      <tr>
        <td>
          <button onclick="ins_after(this);">Insert</button>
        </td>
        <td>ne6to</td>
        <td>
          <input type="text" name="property">
        </td>
      </tr>
    </table>
  </form>
  <button onclick="proba();">proba1</button>
  <button onclick="ins_after(this);">proba2</button>
</body>

</html>

Две кнопки имеют одинаковую функцию обратного вызова при событии onclick. Я пробую это в Chrome и Mozilla, и результат тот же. Когда я нажимаю «Вставить», новая строка появляется в таблице, я использую оповещение, чтобы увидеть это, потому что после завершения функции строка снова исчезает. Также, когда я добавляю несколько строк кнопкой «proba2» и после этого пытаюсь нажать кнопку «Вставить» - она ​​добавляет новую строку, тогда все новые созданные строки исчезают в конце функции обратного вызова.

Прошу прощения, если это тривиально, но я новичок в JS.

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Кнопка внутри формы имеет по умолчанию type="submit", и, нажав на нее, вы отправите форму и перезагрузите страницу, сбросив строки таблицы (проверьте принятый ответ здесь Отключить автоматическую отправку формы при нажатии кнопки )

Чтобы избежать такого поведения, добавьте type="button" к вашей кнопке «Вставить» внутри таблицы, например: 

<form>
    <table>
        <caption style='font-size: 1.5em;'>Parameters list</caption>
        <tr>
            <th>Insert after</th>
            <th>Delete</th>
            <th>Parameter name</th>
        </tr>
        <tr>
            <td>
                <button type="button" onclick="ins_after(this);">Insert</button>
            </td>
            <td>ne6to</td>
            <td>
                <input type="text" name="property">
            </td>
        </tr>
    </table>
</form>
0 голосов
/ 03 июля 2018

Она исчезает, потому что ваша кнопка находится в форме, поэтому она обновляет страницу каждый раз.

Попробуйте добавить event.preventDefault(); в конце своей функции, чтобы запретить стандартные функции кнопки в форме.

Вот рабочий пример: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Parameter AutoCgen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        table, th, td {
            padding: 10pt;
            border-style: solid;
            border-width: 1pt;
            border-collapse: collapse;
            text-align: center;
            white-space: nowrap;
            margin: auto;
        }
        table {
            width: auto;
        }
        tr:nth-child(even) {background-color: #f2f2f2;}

        input[type=text] {
            background-color: transparent;
            border-width: 0px;
        }
    </style>
    <script>
        'use strict';

        var proba = function () {
            for (var r of document.getElementsByTagName('table')[0].rows)
                for (var d of r.cells) console.log(d.innerHTML);
        }

        var ins_after = function (obj) {
            obj = obj || window.event;
            var r = document.getElementsByTagName('table')[0].insertRow(obj.parentNode.parentNode.rowIndex);
            var c1 = r.insertCell(0);
            var c2 = r.insertCell(1);
            var c3 = r.insertCell(2);
            c1.innerHTML = 'drugo_ne6to';
            event.preventDefault();
            //alert(c1);
        }
    </script>
</head>
<body>
    <form>
        <table>
            <caption style='font-size: 1.5em;'>Parameters list</caption>
            <tr>
                <th>Insert after</th>
                <th>Delete</th>
                <th>Parameter name</th>
            </tr>
            <tr>
                <td>
                    <button onclick="ins_after(this);">Insert</button>
                </td>
                <td>ne6to</td>
                <td>
                    <input type="text" name="property">
                </td>
            </tr>
        </table>
    </form>
    <button onclick="proba();">proba1</button>
    <button onclick="ins_after(this);">proba2</button>
</body>
</html>
...