页面中不显示新行

我已经成功编译了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="#ddd" 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';
}

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

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

这两行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="#ddd" 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>

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

查看我的代码。

相关内容

最新更新

热门标签：