怎么用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局部刷新页面。具体的你自己去学习相关知识吧。
相似回答