个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
这里我想在点击提交按钮后将数据输入到文本框中，将文本框数据插入到html表格中。在表格记录中必须有编辑按钮，点击编辑按钮后，特定记录进入文本框并更新到 html 表格。在这里我使用了 inserCell()(new cell) 之后我无法做。请重播
function addrow()
{
var name = document.getElementById("txtbox1").value;
var password = document.getElementById("txtbox2").value;
var id = document.getElementById("txtbox3").value;
var age = document.getElementById("txtbox4").value;
var table = document.getElementById("mytable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = name;
cell2.innerHTML = password;
cell3.innerHTML = id;
cell4.innerHTML = age;
cell5.innerHTML = "new cell";
}
//html design page<head>
<script type="text/javascript" src="JavaScript.js"></script>
</head>
<body>
<table class="auto-style1">
<tr>
<td>NAME</td>
<td><input type="text" value="" id="txtbox1" /></td>
<td> </td>
</tr>
<tr>
<td>PASSWORD</td>
<td><input type="text" value="" id="txtbox2" /></td>
<td> </td>
</tr>
<tr>
<td>ID</td>
<td><input type="text" value="" id="txtbox3" /></td>
<td> </td>
</tr>
<tr>
<td>AGE</td>
<td><input type="text" value="" id="txtbox4" /></td>
<td> </td>
</tr>
<tr>
<td></td>
<td><input type="button" VALUE="SUBMIT" id="BTNSUBMIT" onclick="addrow()"/></td>
</tr>
</table>
<table id="mytable" border="1" >
<tr>
<th>NAME</th>
<th>PASSWORD</th>
<th>ID</th>
<th>AGE</th>
</tr>
</table>
</body>
</html>最佳答案
从 javascript 管理 html 的最简单方法是使用数据绑定(bind)库，例如 knockout js。
这是您想要实现的工作示例:
https://jsfiddle.net/up14yz68/
打开该链接可查看已实现功能和所有功能的现场演示。
代码，html:
<table class="auto-style1">
<tbody data-bind="foreach: fields">
<tr>
<td data-bind="text: title"></td>
<td><input type="text" data-bind="value: value"></td>
</tr>
</tbody>
<tr>
<td></td>
<td><input type="button" VALUE="SUBMIT" data-bind="click: addRow"></td>
</tr>
</table>
<table id="mytable" border="1" >
<tr data-bind="foreach: fields">
<th data-bind="text: name"></th>
</tr>
<tbody data-bind="foreach: rows">
<tr data-bind="foreach: $data">
<td data-bind="text: value"></td>
</tr>
</tbody>
</table>
代码，js:
function viewModel() {
var self = this;
self.rows = ko.observableArray([
[
{title: "name", value: "Santiago"},
{title: "password", value: "Pa55w0rd"},
{title: "id", value: "100255"},
{title: "age", value: "28"}
], [
{title: "name", value: "Stack"},
{title: "password", value: "overflow"},
{title: "id", value: "108888"},
{title: "age", value: "13"}
]
]);
self.fields = [
{title: "name", value: ko.observable("John")},
{title: "password", value: ko.observable("secret123")},
{title: "id", value: ko.observable("10001")},
{title: "age", value: ko.observable("50")},
];
self.addRow = function() {
var newRow = [];
self.fields.forEach(function(field) {
newRow.push({title: field.title, value: field.value()});
field.value("");
});
self.rows.push(newRow);
}
}
ko.applyBindings(new viewModel());
随意浏览 fiddle 以了解发生了什么。您可以在他们的网站上学习使用 knockout，他们有很好的教程。
还有其他数据绑定(bind)的替代方案，比如 Angular，但我觉得 Knockout 非常精简，并且与应用程序的其余部分不显眼。
关于javascript - 将数据输入文本框，保存到html表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48668511/
24
4
0
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。 下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
我正在尝试保存模型的实例，但我得到了 Invalid EmbeddedDocumentField item (1) 其中 1 是项目的 ID(我认为)。 模型定义为 class Graph(Docum
我有一个非常奇怪的问题......在我的 iPhone 应用程序中，用户可以打开相机胶卷中的图像，在我的示例中 1920 x 1080 像素 (72 dpi) 的壁纸。 现在，想要将图像的宽度调整为例
目前，我正在使用具有排序/过滤功能的数据表成功地从我的数据库中显示图像元数据。在我的数据表下方，我使用第三方图像覆盖流( http://www.jacksasylum.eu/ContentFlow/
我的脚本有问题。我想按此顺序执行以下步骤: 1. 保存输入字段中的文本。 2. 删除输入字段中的所有文本。 3. 在输入字段中重新加载之前删除的相同文本。 我的脚本的问题是 ug()- 函数在我的文本
任何人都可以帮助我如何保存多对多关系吗？我有任务，用户可以有很多任务，任务可以有很多用户(多对多)，我想要实现的是，在更新表单中，管理员可以将多个用户分配给特定任务。这是通过 html 多选输入来完成
我在 Tensorflow 中训练了一个具有批归一化的模型。我想保存模型并恢复它以供进一步使用。批量归一化是通过 完成的 def batch_norm(input, phase): retur
我遇到了 grails 的问题。我有一个看起来像这样的域: class Book { static belongsTo = Author String toString() { tit
所以我正在开发一个应用程序，一旦用户连接(通过 soundcloud)，就会出现以下对象: {userid: userid, username: username, genre: genre, fol
我正在开发一个具有多选项卡布局的 Angular 7 应用程序。每个选项卡都包含一个组件，该组件可以引用其他嵌套组件。 当用户选择一个新的/另一个选项卡时，当前选项卡上显示的组件将被销毁(我不仅仅是隐
我尝试使用 JEditorPane 进行一些简单的文本格式化，但随着知识的增长，我发现 JTextPane 更容易实现并且更强大。 我的问题是如何将 JTextPane 中的格式化文本保存到文件？它应
使用 Docker 相当新。 我为 Oracle 11g Full 提取了一个图像。创建了一个数据库并将应用程序安装到容器中。 正确配置后，我提交了生成 15GB 镜像的容器。 测试了该图像的新容器，
我是使用 Xcode 和 swift 的新手，仍在学习中。我在将核心数据从实体传递到文本字段/标签时遇到问题，然后用户可以选择编辑和保存记录。我的目标是，当用户从 friendslistViewCon
我正在用 Java 编写 Android 游戏，我需要一种可靠的方法来快速保存和加载应用程序状态。这个问题似乎适用于大多数 OO 语言。 了解我需要保存的内容:我正在使用策略模式来控制我的游戏实体。我
我想知道使用 fstream 加载/保存某种结构类型的数组是否是个好主意。注意，我说的是加载/保存到二进制文件。我应该加载/保存独立变量，例如 int、float、boolean 而不是结构吗？我这么
我希望能够将 QNetworkReply 保存到 QString/QByteArray。在我看到的示例中，它们总是将流保存到另一个文件。 目前我的代码看起来像这样，我从主机那里得到一个字符串，我想做的
我正在创建一个绘图应用程序。我有一个带有 Canvas 的自定义 View ，它根据用户输入绘制线条: class Line { float startX, startY, stopX, stop
我有 3 个 Activity 第一个 Activity 调用第二个 Activity ，第二个 Activity 调用第三个 Activity 。 第二个 Activity 使用第一个 Activi
我想知道如何在 Xcode 中保存 cookie。我想使用从一个网页获取的 cookie 并使用它访问另一个网页。我使用下面的代码登录该网站，我想保存从该连接获得的 cookie，以便在我建立另一个连
我有一个 SQLite 数据库存储我的所有日历事件，建模如下: TimerEvent *Attributes -date -dateForMark -reminder *Relat
我是一名优秀的程序员,十分优秀！