>  기사  >  웹 프론트엔드  >  table_javascript 기술의 js 코드에 텍스트 입력 상자 내용을 추가합니다.

table_javascript 기술의 js 코드에 텍스트 입력 상자 내용을 추가합니다.

WBOY
WBOY원래의
2016-05-16 17:25:251127검색
复代码 代码如下:

< ;!DOCTYPE html>

<머리>
表格处理.html









<본문>



























<스크립트>
document.getElementById("submit").onclick=function(){
//alert("성공");
//获取输入节点
var nameElement=document.getElementById("iname");
var emailElement=document.getElementById("iemail");
var addressElement=document.getElementById("iaddress");

//创建表格节点
var trNode=document.createElement("tr");
var nameNode=document.createElement("td");
var emailNode=document.createElement("td");
var addressNode=document.createElement("td");

//向表格中添加创建的节点及文本内容
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);

}



성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이름 邮箱 地址
jzy 359@qq.com 중대
jzy 359@qq.com 중대