<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试</title>
</head>
<body>
<input type="text" name="input1" id="input1" /> <input onclick="add()" type="button" value="添加">
<table border="1" id="table1" style="margin-top: 10px;">
<tr>
<td>表头</td>
<td>数据</td>
<td>操作</td>
</tr>
<!-- <tr>
<td>1</td>
<td>nodejs</td>
<td><button onclick="handleClick(event)">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>jdk</td>
<td><button onclick="handleClick(event)">删除</button></td>
</tr>
<tr>
<td>3</td>
<td>tomcat</td>
<td><button onclick="handleClick(event)">删除</button></td>
</tr> -->
</table>
<p id="demo">原来文本内容</p>
<button onclick="name11()" id="changeText" style="margin-top: 10px;">点击</button>
<script>
window.onload = function (e) {
init();
}
//页面初始化数组
var initList = ['nodejs', 'jdk', 'tomcat','spring','mybatis','springmvc'];
// 自定义一个初始化函数
//动态渲染
//箭头函数
init = () => {
let table = document.getElementById("table1");
initList.forEach(element => {
let rows = table.rows.length;
createDemo(rows, element, table);
});
}
function add() {
let table = document.getElementById("table1");
let input1 = document.getElementById("input1")
let value = input1.value;
let rows = table.rows.length;
createDemo(rows, value, table);
input1.value = "";
// console.log(table.children[0].children[rows-1]);
}
function createDemo(currentRow, text, element) {
let tr = document.createElement('tr');
//创建第一个 td 元素并将其挂载到 tr 上
let td1 = document.createElement('td');
let numText = document.createTextNode(currentRow);
td1.appendChild(numText);
tr.appendChild(td1);
//创建第二个 td 元素并将其挂载到 tr 上
let td2 = document.createElement('td');
let nodeText = document.createTextNode(text);
td2.appendChild(nodeText);
tr.appendChild(td2);
//创建第三个 td 元素并将其挂载到 tr 上
let td3 = document.createElement('td');
let button = document.createElement('button');
let deleteText = document.createTextNode("删除");
// button.appendChild(text);
button.innerHTML = "删除";
button.onclick = handleClick; //有括号的话会立即执行函数
td3.appendChild(button);
tr.appendChild(td3);
element.appendChild(tr);
}
function handleClick(e) {
console.log("function has been called");
console.log("e.target---------");
console.log(e.target.parentElement.parentElement);
let tr = e.target.parentElement.parentElement;
console.log("result---------");
let result = tr.parentElement.removeChild(tr);
console.log(result);
}
function name11() {
var p = document.getElementById('demo');
p.innerHTML = "qqq";
}
/*
function fnA(n1, n2, n3, n4) {
let a = "hello world";
var c = "hello world";
let b = 1;
var d = 1;
console.log(a);
}
console.log(fnA);
console.log(fnA.prototype);
console.log(fnA.length);
console.log(fnA.bind());*/
</script>
</body>
</html>
```
javascript 动态渲染节点
最新推荐文章于 2025-05-19 02:24:27 发布