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

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

<!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;
documentgetElementById('a')styledisplay = 'none';
documentgetElementById('b')styledisplay = 'block';
var input1 = documentgetElementById('input' + a);
var input3 = documentgetElementById('input3');
input3value = input1value;
}
function ok() {
documentgetElementById('a')styledisplay = 'block';
documentgetElementById('b')styledisplay = 'none';
var input0 = documentgetElementById('input' + c);
var input3 = documentgetElementById('input3');
input0value = input3value;
}
function submit() {
var input1 = documentgetElementById('input1');
var input2 = documentgetElementById('input2');
var span1 = documentgetElementById('span1');
var span1 = documentgetElementById('span1');
span1innerHTML = input1value;
span2innerHTML = input2value;
}
</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>

你这里说是要用JS实现,那你数据也用JS输出就很方便了嘛,否则ASP涉及与服务器通信,而就你这个程序看来,貌似没有想和服务器通信嘛。我把你的HTML改了一下,给input和textarea加了id属性,删除了responsewrite语句。
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
windowonload = initAll;
function initAll() {
documentgetElementsByTagName("form")[0]onsubmit = change;
}//按下提交按钮后触发change函数
function change() {
var inText = documentgetElementById("intext")value;
//以inText变量保存用户输入的数值,outText变量保存修改后的数值。
var outText = "";
for(var i=0;i<inTextlength;i++) {
outText += StringfromCharCode(inTextcharCodeAt(i)+1);
}
documentgetElementById("textarea")value = outText;
return false;
}
</script>
</head>
<body>
<center>
<form action="#">
字符:<input id="intext" type=text name="cmd" size=60><br>
<br/>
<input type=submit value="Let's go">
</form>
<br/>
<textarea readonly cols=80 rows=20 id="textarea"> </textarea>
</center>
</body>
</html>
恩,大概就是这样子了,不太清楚你的原意到底是什么~~

表格的第一行为thead中的th
剩下的数据放到tbody中
最后那一行添加的放到tfoot中
对tbody下面的所有tr绑定一个点击事件
事件中获取这个tr下的所有td,就可以获取这行的数据了
大概代码如下:
var trs =documentgetElementById("tbodyId")getElementsByTagName("tr");
for(int i=0;i<=trslength;i++)
{
var tr = trs[i];
var tds=trgetElementsByTagName("td");
//下面遍历tds就可以去获取数据了
//把数据放到下面的表单就好了
//然后提交数据,在服务端进行修改
}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13355862.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-20
下一篇 2023-07-20

发表评论

登录后才能评论

评论列表(0条)

保存