Question

为什么按钮“ proba2”会在表中添加行，而按钮“ Insert”（在表中的人）会添加行，而该行在函数末尾消失呢？

我的代码是：

<!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中尝试此操作，结果是相同的。当我按“插入”时，新行出现在表中，我使用alert可以看到这一点，因为在函数结束后，该行再次消失。同样，当我使用按钮“ proba2”添加几行，然后尝试按钮“插入”时，它会添加新行，然后所有新创建的行都会在回调函数末尾消失。

抱歉，这很简单，但是我是JS新手。

Answer 1

它消失了，因为您的按钮处于表单形式，因此每次都刷新页面。

尝试在函数末尾添加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>

Answer 2

默认情况下，表单内的按钮具有type="submit"，单击该按钮，您将提交表单并重新加载页面，重置表格行（在Disable form auto submit on button click处检查接受的答案）

要避免这种情况，请在表内的“插入”按钮上添加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>

表格中按钮的table.insertRow不起作用

2 个答案: