页面中不显示新行答案

【问题标题】：No display of new row in the page页面中不显示新行
【发布时间】：2020-01-09 21:09:36
【问题描述】：

我已经成功编译了 JS 代码，但是没有输出将表单值放到表格中的事件

<body>
    <div class="box">
        <h2>Add or Update Item</h2>
        <form id="addform" autocomplete="off">
            <div class="additembox">
                <label>Item No. </label><input id="itemno" type="text" name="id" pattern="#\d\d\d" title="#xxx, x=digits">
            </div>
            <div class="additembox">
                <label>Item Name </label><input id="itemname" type="text" name="iname">
            </div>
            <div class="additembox">
                <label>Price </label><input id="price" type="text" name="price">
            </div>
            <input type="button" value="Update">
            <button id="sub" onclick="addr()">Add</button>

        </form>
    </div>
    <table id="addtable">
        <tr>
            <th>Sl. no</th>
            <th>Item</th>
            <th>Hotel</th>
            <th>Price</th>
        </tr>
    </table>
</body>
<script type="text/javascript">
    function addr(){
    var tab = document.getElementById('addtable');
    //getting form values
    var ino=document.getElementById('itemno').value;
    var iname=document.getElementById('itemname').value;
    var p=document.getElementById('price').value;
    var rowcount = tab.rows.length;
    var row = tab.insertRow(rowcount);
    row.insertCell(0).innerText = 'ino';
    row.insertCell(1).innerText = 'iname';
}

我已尝试在表单中加载值并单击按钮。

我希望输出显示在本地网页上，但没有显示。

【问题讨论】：

请编辑代码并完成addr函数
我已经完成了这个功能。很抱歉在发布过程中出现错误。

标签： javascript html forms html-table

【解决方案1】：

当您将按钮保留在表单中时，它会更改 URL，因此您不会获得预期的输出。
在我的代码中，我将addbutton 放在了表单之外，然后它就可以正常工作了。

<!DOCTYPE html>
<html>
<head>


</head>
<body>
  <div class="box">
    <h2>Add or Update Item</h2>
    <form id="addform" autocomplete="off">
      <div class="additembox">
        <label>Item No.     </label><input id="itemno" type="text" name="id" title="#xxx, x=digits">
      </div>
      <div class="additembox">
        <label>Item Name    </label><input id="itemname" type="text" name="iname">
      </div>
      <div class="additembox">
        <label>Price    </label><input id="price" type="text" name="price">
      </div>
      <input type="button" value="Update">

    </form>
      <button id="sub" onClick="addr(this)">Add</button>
  </div>
  <table id="addtable">
    <tr><th>Sl. no</th><th>Item</th><th>Hotel</th><th>Price</th></tr>   
  </table>
</body>
    </html>

    <script type="text/javascript">
    function addr(value){
      console.log(value);
    var tab = document.getElementById('addtable');
    //getting form values
    var ino=document.getElementById('itemno').value;
    var iname=document.getElementById('itemname').value;
    var p=document.getElementById('price').value;
    var rowcount = tab.rows.length;
    var row = tab.insertRow(rowcount);
    console.log(rowcount , row);
    row.insertCell(0).innerText = ino;
    row.insertCell(1).innerText = iname;
    row.insertCell(2).innerText = p;
  }
    </script>

查看我的代码。

【讨论】：

请点赞并接受答案。欢迎。 @VineetK

【解决方案2】：

这两行row.insertCell(0).innerText = 'ino';row.insertCell(1).innerText = 'iname'; 将 ino 和 iname 添加为字符串，但您需要变量值。也可以使用按钮类型button 或使用event.preventDefault

function addr() {
  var tab = document.getElementById('addtable');
  //getting form values
  var ino = document.getElementById('itemno').value;
  var iname = document.getElementById('itemname').value;
  var p = document.getElementById('price').value;
  var rowcount = tab.rows.length;
  var row = tab.insertRow(rowcount);
  row.insertCell(0).innerText = ino;
  row.insertCell(1).innerText = iname;
}

<div class="box">
  <h2>Add or Update Item</h2>
  <form id="addform" autocomplete="off">
    <div class="additembox">
      <label>Item No.     </label><input id="itemno" type="text" name="id" pattern="#\d\d\d" title="#xxx, x=digits">
    </div>
    <div class="additembox">
      <label>Item Name    </label><input id="itemname" type="text" name="iname">
    </div>
    <div class="additembox">
      <label>Price    </label><input id="price" type="text" name="price">
    </div>
    <input type="button" value="Update">
    <button id="sub" type="button" onclick="addr()">Add</button>

  </form>
</div>
<table id="addtable">
  <tr>
    <th>Sl. no</th>
    <th>Item</th>
    <th>Hotel</th>
    <th>Price</th>
  </tr>
</table>

【讨论】：