當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript中获取表单信息并添加在表格中
生活随笔
收集整理的這篇文章主要介紹了
JavaScript中获取表单信息并添加在表格中
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果如下圖所示：
?
填寫信息后：
<!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; /*單元格的邊框?yàn)?像素的實(shí)線*/}*{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循環(huán)遍歷集合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; //因?yàn)槭嵌噙x，所以將內(nèi)容加上l += " ";}var name, password, location, introduce, hid; //定義變量//數(shù)據(jù)的獲取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>序號(hào)</th><th>姓名</th><th>性別</th><th>年齡</th><th>技能</th><th>地點(diǎn)</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">地點(diǎn)：<select name="choose" οnchange="choose()"><option>請(qǐng)選擇城市</option><option value="北京">北京</option><option value="廣州">廣州</option><option value="深圳">深圳</option></select><input type="button" value="添加" onclick="getValue()"></form></body> </html>總結(jié)
以上是生活随笔為你收集整理的JavaScript中获取表单信息并添加在表格中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用JavaScript获取表单里的值
- 下一篇： JSTL标准标签库的国际化标签