table.insertRow from button in table doesn't work

Question

Why the button "proba2" adds row in the table, but the button "Insert", who is in the table - adds row, which disappears at the function end?

My code is:

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

The two buttons have the same one callback function on onclick event. I try this in Chrome and Mozilla and the result is the same. When I press "Insert" the new row appears in the table, I use alert to can see this, because after the function end, the row disappears again. Also when I add several rows with button "proba2" and after that try the button "Insert" - it adds new row, then all new created rows disappears at the callback function end.

Apologize if this is trivial, but I'm new to JS.

The "Insert"-button submits the form, and causes the page to refresh. — Daan, Jul 03 '18 at 12:56

score 0 · Answer 1 · answered Jul 03 '18 at 12:06

It is disappearing because your button is in a form, so it is refreshing the page each time.

Try and add event.preventDefault(); at the end of your function to prevent the default functionality of the button in the form.

Here is a working example:

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

score 0 · Answer 2 · answered Jul 03 '18 at 12:10

A button inside a form has by default type="submit" and by clicking on it you will submit the form and reload the page, resetting your table rows (check the accepted answer here Disable form auto submit on button click)

To avoid this kind of behavior add type="button" to your "Insert" button inside the table like this:

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

table.insertRow from button in table doesn't work

2 Answers2