javascript - 如何在不立即重置的情况下向 Javascript 中的表添加一行？-6ren

javascript - 如何在不立即重置的情况下向 Javascript 中的表添加一行？

转载作者：行者123 更新时间：2023-11-30 13:31:25

我正在尝试学习 JavaScript，但我正在为一个非常简单的示例而苦苦挣扎。

我有一个表单，我想在每次用户点击提交时将其内容添加到“目录”中的新表行。

但是当我使用下面的代码点击提交时，我看到新表格行短暂闪烁然后消失，就好像页面正在重置一样。

当我改用注释掉的代码时(只是将表单内容附加到 body.innerHTML)，它工作正常。

我做错了什么？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4   /loose.dtd"> 
<html>
<head>
<title>Javascript test</title>
</head>

<script type="text/javascript">
function addItem() {
    var itemName = document.getElementById('item_name').value;      
    var itemPrice = document.getElementById('item_price').value;

    var newRow = document.createElement('tr');
    //var body = document.getElementById('body');
   //body.innerHTML += itemName;    
   newRow.innerHTML = "<td>" + itemName + "</td><td>" + itemPrice + "</td>";
   var catalog = document.getElementById('catalog');
   catalog.appendChild(newRow);
}

</script>

<body id="body"> 
 <form><h2>Add an Item to the Catalog</h2>

<p>Item Name: <input type="text" id="item_name" value="" /> Price: <input type="text"    id="item_price" value="" /></p>

<input type="submit" onClick="addItem()" value="Add" id="submit" />
<input type="reset" id="reset" />
</form>

<table id="catalog"></table>

</body>
</html>

最佳答案

“提交”的输入类型将在执行您的 JavaScript 后提交表单。

如果您将输入类型更改为“按钮”，您将看到您的代码正常工作。

<input type="button" onClick="addItem()" value="Add" id="submit" />

这也称为“回发”，涉及获取表单输入字段中的数据，并将其再次发布到页面。发布到页面的数据可以从服务器端代码中获取，作为进一步操作的基础。

否则，您的代码没问题。我唯一的建议是以与构建 trs

相同的方式构建 tds

关于javascript - 如何在不立即重置的情况下向 Javascript 中的表添加一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6642928/

文章推荐： c# - 更改 ListView 中的确切滚动位置

文章推荐： ios - SWRevealviewcontroller 嵌套 ViewController

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在不立即重置的情况下向 Javascript 中的表添加一行？