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

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

WBOY원래의: 2016-05-16 17:25:251101검색

复代码代码如下:

< ;!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);

}

성명：

이전 기사：js 객체에 특정 attribute_javascript 기술이 있는지 확인하는 js 코드다음 기사：js 객체에 특정 attribute_javascript 기술이 있는지 확인하는 js 코드

이름	邮箱	地址
jzy	359@qq.com	중대
jzy	359@qq.com	중대

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

관련 기사