JavaScript - 操作元素 - 节点操作 - 复制节点
文章目录
- 一、复制节点
- 复制节点
- 二、动态生成表格
一、复制节点
复制节点
语法 :
node.cloneNode()
返回调用该方法的节点的一个副本.
- 如果括号参数为空或者为false, 则是浅拷贝, 即只克隆复制节点本身, 不克隆里面的子节点.
- 如果括号参数为true, 则是深拷贝, 克隆复制节点本身和里面的子节点.
二、动态生成表格
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>a {color: red;text-decoration: none;}table {width: 500px;margin: 100px auto;text-align: center;}table thead tr {background-color: #ccc;height: 40px;}tbody tr {background-color: skyblue;}style>
head><body><table><thead><tr><th>姓名th><th>科目th><th>成绩th><th>操作th>tr>thead><tbody>tbody>table><script>var data = [{name: '魏一诺',subject: 'JavaScript',score: 100}, {name: '魏二诺',subject: 'JavaScript',score: 90}, {name: '魏三诺',subject: 'JavaScript',score: 80}, {name: '魏四诺',subject: 'JavaScript',score: 70}]var tbody = document.querySelector('tbody');// 动态创建行for (var i = 0; i < data.length; i++) {// 创建行var tr = document.createElement('tr');tbody.appendChild(tr);for (key in data[i]) {// 创建列var td = document.createElement('td');tr.appendChild(td);td.innerHTML = data[i][key];}var td = document.createElement('td');tr.appendChild(td);td.innerHTML = "删除";}//获取元素var trs = document.querySelectorAll('tbody tr');for (var i = 0; i < trs.length; i++) {// 给最后一个td绑定事件var a = trs[i].lastElementChild.children[0];a.onclick = function () {// 点击删除tbody.removeChild(this.parentNode.parentNode);}}script>
body>html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！