將文本輸入框內(nèi)容加入表中的js代碼
更新時(shí)間：2013年08月18日 15:46:45 作者：
將文本內(nèi)容添加到表格中在實(shí)際應(yīng)用中很常見，下面為大家簡要介紹下具體的實(shí)現(xiàn)過程，感興趣的朋友可以參考下
復(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)文章
本文介紹了如何使用pdfmake第三方庫在項(xiàng)目中根據(jù)模板生成PDF文件,文中還提到了常用的配置,如頁眉和頁腳效果,對(duì)pdfmake pdf使用方法感興趣的朋友一起看看吧2024-09-09
這篇文章主要介紹了通過webpack引入第三方庫的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
原生js實(shí)現(xiàn)圖片放大縮小計(jì)時(shí)器效果
本文主要介紹了原生js實(shí)現(xiàn)圖片放大縮小計(jì)時(shí)器效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
原型方法的不同寫法居然會(huì)影響調(diào)試的解決方法
原型方法的不同寫法居然會(huì)影響調(diào)試的解決方法...2007-03-03
這篇文章主要介紹了新手快速入門JavaScript裝飾者模式與AOP,在不改變對(duì)象）的情況下動(dòng)態(tài)的為其添加功能,這就是裝飾者模式，下面小編帶大家來深入學(xué)習(xí)一下吧2019-06-06
JavaScript使用Promise實(shí)現(xiàn)分批處理接口請(qǐng)求
當(dāng)我們?cè)趯?shí)際項(xiàng)目中遇到需要批量發(fā)起上百條接口請(qǐng)求怎么辦呢,本文就來為大家介紹一下JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請(qǐng)求,需要的小伙伴可以參考一下2023-11-11
這篇文章主要通過一個(gè)實(shí)例，簡單介紹了javascript arguments使用方法，小伙伴們參考下。2014-12-12
bootstrap-datetimepicker實(shí)現(xiàn)只顯示到日期的方法
這篇文章主要介紹了bootstrap-datetimepicker實(shí)現(xiàn)只顯示到日期的方法,涉及bootstrap插件相關(guān)操作的設(shè)置與使用技巧,需要的朋友可以參考下2016-11-11
?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板
這篇文章主要介紹了?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板，利用openHarmony內(nèi)置的API?cnavas組件實(shí)現(xiàn)，具體詳細(xì)內(nèi)容需要的小伙伴可以參考一下2022-07-07
這篇文章主要和大家談一談bootstrap響應(yīng)式布局，本教程講解如何在網(wǎng)頁布局中應(yīng)用響應(yīng)式設(shè)計(jì)，感興趣的小伙伴們可以參考一下2016-05-05