Javascript 页面中不显示新行_Javascript_Html_Forms_Html Table

Javascript 页面中不显示新行

javascript html forms

Javascript 页面中不显示新行,javascript,html,forms,html-table,Javascript,Html,Forms,Html Table,我已经成功地编译了JS代码，但是没有将表单值放到表中的事件输出 <body> <div class="box"> <h2>Add or Update Item</h2> <form id="addform" autocomplete="off"> <div class="additembox"> <label>Item

我已经成功地编译了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（）{
var tab=document.getElementById（'addtable'）；
//获取表单值
var ino=document.getElementById（'itemno'）。值；
var iname=document.getElementById（'itemname'）.value；
var p=document.getElementById（'price'）。值；
var rowcount=tab.rows.length；
var row=tab.insertRow（rowcount）；
行.insertCell（0）.innerText='ino'；
insertCell（1.innerText='iname'；
}

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

我希望输出显示在本地网页上，但它不会显示。

此处，当您将按钮保留在表单中时，它会更改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>


添加或更新项目
项目编号。
项目名称
价格
添加
诺伊特普莱斯酒店
函数地址（值）{
console.log（值）；
var tab=document.getElementById（'addtable'）；
//获取表单值
var ino=document.getElementById（'itemno'）。值；
var iname=document.getElementById（'itemname'）.value；
var p=document.getElementById（'price'）。值；
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；
}

查看我的代码

这两行

row.insertCell（0.innerText='ino'；insertCell（1.innerText='iname'

正在将ino&iname添加为字符串，但您需要变量值。还可以使用按钮类型

按钮

或使用

事件。预防默认值

函数addr（）{
var tab=document.getElementById（'addtable'）；
//获取表单值
var ino=document.getElementById（'itemno'）。值；
var iname=document.getElementById（'itemname'）.value；
var p=document.getElementById（'price'）。值；
var rowcount=tab.rows.length；
var row=tab.insertRow（rowcount）；
row.insertCell（0）.innerText=ino；
row.insertCell（1）.innerText=iname；
}


添加或更新项目
项目编号。
项目名称
价格
添加
序号
项目
酒店
价格

请编辑代码并完成

addr

功能我已完成该功能。很抱歉在发帖时出错。请投票并接受答案。欢迎光临@维内特克