將文本輸入框內(nèi)容加入表中的js代碼
更新時(shí)間:2013年08月18日 15:46:45 作者:
將文本內(nèi)容添加到表格中在實(shí)際應(yīng)用中很常見(jiàn),下面為大家簡(jiǎn)要介紹下具體的實(shí)現(xiàn)過(guò)程,感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<SPAN style="FONT-SIZE: 14px"><!DOCTYPE html>
<html>
<head>
<title>表格處理.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<form id="form1">
<input type="text" id="iname">
<input type="text" id="iemail">
<input type="text" id="iaddress">
<input type="button" value="提交" id="submit">
</form>
<hr>
<table border="1" id="border">
<tr>
<td id="name">姓名</td>
<td id="email">郵箱</td>
<td id="address">地址</td>
</tr>
<tr>
<td id="name">jzy</td>
<td id="email">359@qq.com</td>
<td id="address">重慶</td>
</tr>
<tr>
<td id="name">jzy</td>
<td id="email">359@qq.com</td>
<td id="address">重慶</td>
</tr>
</table>
</body>
<script>
document.getElementById("submit").onclick=function(){
//alert("success");
//獲取輸入節(jié)點(diǎn)
var nameElement=document.getElementById("iname");
var emailElement=document.getElementById("iemail");
var addresssElement=document.getElementById("iaddress");
//創(chuàng)建表格節(jié)點(diǎn)
var trNode=document.createElement("tr");
var nameNode=document.createElement("td");
var emailNode=document.createElement("td");
var addressNode=document.createElement("td");
//向表格中添加創(chuàng)建的節(jié)點(diǎn)及文本內(nèi)容
var borderElement=document.getElementById("border");
borderElement.appendChild(trNode);
trNode.appendChild(nameNode);
trNode.appendChild(emailNode);
trNode.appendChild(addressNode);
var nametextNode=document.createTextNode(nameElement.value);
var emailtextNode=document.createTextNode(emailElement.value);
var addresstextNode=document.createTextNode(addresssElement.value);
nameNode.appendChild(nametextNode);
emailNode.appendChild(emailtextNode);
addressNode.appendChild(addresstextNode);
}
</script>
</html>
</SPAN>
相關(guān)文章
js canvas實(shí)現(xiàn)星空連線背景特效
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)星空連線背景特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11JavaScript實(shí)現(xiàn)級(jí)聯(lián)菜單的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)級(jí)聯(lián)菜單的方法,涉及javascript頁(yè)面元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06使用JavaScript判斷用戶輸入的是否為正整數(shù)(兩種方法)
在項(xiàng)目開(kāi)發(fā)中,需要使用JavaScript驗(yàn)證用戶輸入的是否為正整數(shù),下面小編給大家分享兩種方法,需要的朋友參考下2017-02-02利用JS實(shí)現(xiàn)簡(jiǎn)單的日期選擇插件
這篇文章主要介紹了利用JS實(shí)現(xiàn)簡(jiǎn)單的日期選擇插件,文中實(shí)現(xiàn)兩種效果的日期選擇,一種是默認(rèn)參數(shù),點(diǎn)擊日期后直接選擇該日期,另一種是顯示按鈕來(lái)設(shè)置時(shí)間,有需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-01-01基于Bootstrap使用jQuery實(shí)現(xiàn)輸入框組input-group的添加與刪除
這篇文章主要介紹了基于Bootstrap使用jQuery實(shí)現(xiàn)輸入框組input-group的添加與刪除的相關(guān)資料,需要的朋友可以參考下2016-05-05Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11