JavaScript中获取表单信息并添加在表格中

效果如下图所示：

填写信息后：

<!DOCTYPE html>
<html><head><title>添加信息</title><style type="text/css">table{text-align: center;       /*文本居中*/margin-left: 25%;       /*外边距 */width:50%;}tr, th, td{border:1px solid;        /*单元格的边框为1像素的实线*/}*{text-align: center;}</style><script type="text/javascript">function getValue() {var number = 1;var value = ++number;number = value;//单选按钮的获取var sex = document.getElementsByName("sex"); //获得的是集合var s = "";for ( var i in sex) { //使用for循环遍历集合if (sex[i].checked == true) {s = sex[i].value;}}//多选按钮的获取var like = document.getElementsByName("hobby");var l = "";for ( var i in like) {if (like[i].checked == true)l += like[i].value; //因为是多选，所以将内容加上l += " ";}var name, password, location, introduce, hid; //定义变量//数据的获取name = document.getElementById("userName").value;age = document.getElementById("age").value;location = document.getElementsByName("choose")[0].value;//添加信息str = "<td>" + number + "</td><td>" + name + "</td><td>" + s+ "</td><td>" + age + "</td><td>" + l + "</td><td>"+ location + "</td><td><input type='button' value='删除'>";//将值赋给id=2的<tr>document.getElementById(number).innerHTML = str;}</script></head><body ><form action=""  method="get"><table><caption>js操作HTML　DOM</caption><tbody ><tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>技能</th><th>地点</th><th>操作</th></tr><tr><td>1</td><td>默默</td><td>男</td><td>22</td><td>Java</td><td>广州</td><td><input type="button"  value="删除" name="delete"></td><tr id="2"></tbody></table><p>姓名：<input type="text" id="userName">年龄：<input type="text"  size=4 id="age">性别： 男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女"> 技能： Java<input type="checkbox" name="hobby" value="Java">Android<input type="checkbox" name="hobby" value="Android">UI<input type="checkbox" name="hobby" value="UI">地点：<select name="choose" οnchange="choose()"><option>请选择城市</option><option value="北京">北京</option><option value="广州">广州</option><option value="深圳">深圳</option></select><input type="button" value="添加" onclick="getValue()"></form></body>
</html>

JavaScript中获取表单信息并添加在表格中相关推荐

form表单提交后台获取表单信息
一.需求客户端通过前端填写表单信息,后台获取表单信息进行相应处理. 二.工具前端采用jsp,后台 springmvc 三.示例 (一).前端输入的form表单代码 <form id=&quo ...
jsp 中提交表单后在firefox、chrome 中中文显示为正常，但在IE中中文显示为乱码？...
如题: jsp 中提交表单后在firefox.chrome 中中文显示为正常,但在IE中中文显示为乱码? 备注:框架:spring 和hibernate 提交表单后,在IE中提交的数据传到Contro ...
php获取表单信息的代码_PHP获取HTML文件名表单数据等
1.PHP获取表单各项数据 --- 与表单提交的方式有关 GET方式,格式:$_GET["formelement"] POST方式,格式:$_POST["formelem ...
247、（案例）javaScript对象--注册表单升级，添加表单校验（利用正则表达式）
1.给表单添加校验功能,当用户输入完成后切换到下一个表格时会检查输入是否正确. 2.用户提交表单时会做一次总的检查. <!DOCTYPE html> <html lang=" ...
java获取表单隐藏域的值,Servlet中使用表单隐藏域
Servlet中使用表单隐藏域表单隐藏域也是一种会话跟踪技术. 如果使用了"表单隐藏域",将使用一个隐藏(不可见)文本域来维护用户的状态. 在这种情况下,我们将信息存储在表单的隐 ...
sql 2012中获取表的信息，包含字段的描述
1.获取数据库中的表 select name from sysobjects where type='U' 2.获取表字段(此处是Route表) Select name from syscolumns ...
php获取表单后如何保存到数据库中,php – 如何将数据从HTML表单保存到WordPress中的数据库表？...
我有一个WordPress主题,我正在尝试将数据从 HTML表单保存到数据库中. 我创建了HTML表单并添加了一个"save& close"按钮,该按钮调用名为saveDa ...
Servlet之请求包含与会话技术获取表单信息(Cookie)
request获取form表单中提交的数据用ServletContext获取 ServletContext context = this.getServletContext(); String us ...
Jquery中获取表单的值并提交
今天写了一个ajax的交互,通过获取表单的值,自己组织post的方式提交. 但是却出现了提交的值为空,后来检查后发现,在提交表单的值得处理的时机有些问题. 一开始先是获取了值,然后在单击提交按钮后传值 ...

JavaScript中获取表单信息并添加在表格中

JavaScript中获取表单信息并添加在表格中相关推荐

最新文章

热门文章