怎么用html和javascript建一个网页,使输入表单的内容,点击提交之后数据会在表格中出现

并且每一行都有一个编辑,编辑上有一个超链接可以修改这一行的数据

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>test</title>
<style>
#b {
text-align: center;
display: none;
}
</style>
<script>
var c;

function edit(a) {
c = a;
document.getElementById('a').style.display = 'none';
document.getElementById('b').style.display = 'block';

var input1 = document.getElementById('input' + a);
var input3 = document.getElementById('input3');

input3.value = input1.value;

}

function ok() {
document.getElementById('a').style.display = 'block';
document.getElementById('b').style.display = 'none';

var input0 = document.getElementById('input' + c);
var input3 = document.getElementById('input3');

input0.value = input3.value;
}

function submit() {
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
var span1 = document.getElementById('span1');
var span1 = document.getElementById('span1');

span1.innerHTML = input1.value;
span2.innerHTML = input2.value;
}
</script>
</head>

<body>
<div id="a">
<table align="center">
<tr>
<td>姓名</td>
<td><input type="text" id="input1" placeholder="请输入" />
<a href="javascript:edit(1)">编辑</a>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" id="input2" placeholder="请输入" />
<a href="javascript:edit(2)">编辑</a>
</td>
</tr>
<tr>
<td></td>
<td><button onclick="submit()">提交</button></td>
</tr>
</table>

<table align="center" border="1">
<tr>
<td>姓名</td>
<td><span id="span1"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td><span id="span2"></span>
</td>
</tr>
</table>
</div>
<div id="b">
<input type="text" id="input3" placeholder="请输入" /><button onclick="ok()">确定</button>
</div>
</body>

</html>

追问

你理解错我的意思了,我是说编辑在每一行表格的最后,就是提交一次数据,生成一行表格,每一行表格后面有一个编辑,点进去之后可以修改数据

追答

大哥 画个图可好,本人愚钝

温馨提示:内容为网友见解,仅供参考
第1个回答  2016-11-24
用表单将数据提交到数据库,然后表格中调用的就是用表单提交的数据,要实现局部更新(不刷新整个网页)需要用到ajax技术。至于编辑,其实就是内容可修改。关键点在数据的插入和调用,以及利用ajax局部刷新页面。具体的你自己去学习相关知识吧。

在HTML中,建立一个提交表单页面,提交后可以直接在数据库看见。_百度...
表单一:<inputname="text1"type="text"> <inputname="submit1"type="submit"value="提交"οnclick="myCheck1();"> <\/form> <formname="form2"method="post"action="#"> 表单二:<inputname="text2"type="text"> <inputname="submit2"type="submit"value="提交"οnclick="myCheck2();"...

HTML 用JS做,表单中几个下拉表单 将选的值用一个提交按钮在同一界面一个...
var lb = document.getElementById("lb1");\/\/动态创建表格,也可以不动态创建,可再body中把表格写好,再这给它们设值。var table = document.createElement("table");table.border = "1"; \/\/设置边框 \/\/创建一行 var tr = table.insertRow();\/\/创建三列,并将三个select的值设置到这三列...

HTML网页表单提交怎么做
在HTML中,通过使用表单元素和JavaScript或服务器端脚本来实现网页表单提交功能。表单元素包括输入框、按钮、下拉菜单等,用于收集用户信息。JavaScript或服务器端脚本负责将收集到的数据发送到指定的服务器。HTML表单的基本结构包含一个``标签,用于定义表单数据的收集方式,以及指定表单数据的提交方式,如`actio...

...用户输入的内容怎么引入到javascript的语句中参与函数计算?
比如你html里有个<input type="text" name="username" id="uname"><\/input> 这个假如就是用户输入的内容 然后你在js写上document.getElementById("uname").value就可以获取到用户输入的内容了

HTML如何接收表单提交的数据?
1、第一步,打开Dreamweaver编辑器,准备一个空白html文件并编写基本html结构,见下图,转到下面的步骤。2、第二步,执行完上面的操作之后,创建一个表单,在表单中设置年龄和名称这两个属性,然后创建一个提交按钮,见下图,转到下面的步骤。3、第三步,执行完上面的操作之后,在上方设置script标签并在...

如何用javascript获取form表单的值并显示到页面上
1、首先,给 HTML 页面里的用户名和密码输入框都定义一个id属性,例如:用户名:<input type="text" id="username" value=""> 密 码:<input type="password" id="password" value=""> 2、其次,放置一个按钮 <button type="button" name="chkBtn" id="chkBtn"> 登录<\/button> 3、...

用HTML做一个网页(用html制作一个网页)
首先,在计算机桌面上创建一个新文件夹,然后在该文件夹中创建一个新的文本文档。然后双击打开带有记事本的文本文档,如下图所示,我们编写一个简单的html代码。HTML属性HTML元素可以设置属性属性可以在元素中添加附加信息属性一般描述于开始标签制作简单的网页将的网页代码输入到记事本中即可,如果想加入表格...

HTML 表单提交 的简单代码
1、打开Dreamweaver 编辑器,准备好一个空白的html文件,写入基本的html结构:2、创建表单,演示中表单中设置年龄和姓名两个属性,然后创建提交按钮:3、上方设置script标签,在里面创建js函数,函数内容为获取表单提交 3、接着打开浏览器预览效果,在表单内填入内容点击提交:4、点击提交后,js就会把数据...

如何在本页提交表单把提交的值显示在本页面上? 请高手把详细的讲解过...
用javascript 取到提交内容:var value = document.getElementById("提交内容的输入框id").value 再新建一个div显示 var div = document.createElement("div");div.innerHTML=value ;显示提交后 后台的结果用ajax 可以用struts2-dojo包里的struts ajax 本页:<%@ taglib prefix="sx" uri="\/...

编写一个网页文件使用表单让用户填写购物订单
DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"><html xmlns="http:\/\/www.w3.org\/1999\/xhtml"><head><meta http-equiv="Content-Type" content="text\/html; charset=gb2312" \/><title>无标题文档<\/title>...

相似回答