您的位置：首页 > Web前端 > JavaScript

javaScript--05 DOM基础 12.11

2016-07-17 08:58 465 查看

<!DOCTYPE html>

<html lang="zh" id="htmlId">

<head id="headId">

<title>BOM基础，复制、克隆节点</title>

<meta charset="utf-8">

<meta name="keywords" content=",,">

<meta name="description" content="">

<style>

div{

text-align: center;

}

table{

display: inline-block;

border: 2px solid red;

}

.addButton

{

display: block;

margin: 0 auto;

}

</style>

</head>



<script type="text/javascript">

function addTable(){

var name = document.getElementById("name");

var email = document.getElementById("email");

var age = document.getElementById("age");



if(name.value == "" || email.value == "" || age.value == "")

{

return;

}



var thead = document.getElementsByTagName("tbody");

thead = thead[0];

var newTr = document.createElement("tr");



var newTd1 = document.createElement("td");

newTd1.innerText = name.value;



var newTd2 = document.createElement("td");

newTd2.innerText = email.value;



var newTd3 = document.createElement("td");

newTd3.innerText = age.value;



var newTd4 = document.createElement("td");

newTd4.innerHTML = "<button onclick = 'deleteThisTd(this)'>删除</button>";



newTr.appendChild(newTd1);

newTr.appendChild(newTd2);

newTr.appendChild(newTd3);

newTr.appendChild(newTd4);



thead.appendChild(newTr);



name.value = "";

email.value = "";

age.value = "";

}



function deleteThisTd(td)

{

td.parentNode.parentNode.parentNode.removeChild(td.parentNode.parentNode);

}

</script>



<body id="bodyId">

<div>

<span>姓名:</span>

<input type="text" id="name" value="茉莉花">



<span>Email:</span>

<input type="text" id="email" value="molihua@flower.cn">



<span>年龄:</span>

<input type="text" id="age" value="38">

</div>

<br>

<input class="addButton" onclick="addTable()" type="button" value="添加">

<hr>

<div>

<table>

<thead>

<tr>

<th>姓名</th><th>邮箱</th><th>年龄</th><th>操作</th>

</tr>

</thead>

<tbody>

</tbody>

<tfoot>

</tfoot>

</table>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航