js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格
Posted 劳埃德·福杰
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格相关的知识,希望对你有一定的参考价值。
目录
第一题
1. 在⽹页中,添加三个DIV段落;
2. 为第⼀个DIV段落,连续添加两个⽂本节点,再将两个⽂本合并;
3. 为第三个DIV段落,添加包含4个列表项的列表,请使用DocumentFragment类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box"></div>
<script>
let box = document.getElementById("box");
// 添加三个div
let div1 = document.createElement("div");
let div2 = document.createElement("div");
let div3 = document.createElement("div");
box.appendChild(div1);
box.appendChild(div2);
box.appendChild(div3);
// 添加两个文本节点
let textNode1 = document.createTextNode("hello");
let textNode2 = document.createTextNode(" world");
div1.appendChild(textNode1);
div1.appendChild(textNode2);
div1.normalize(); // 文本合并
// 添加包含4个列表项的列表
let fragment = document.createDocumentFragment(); // 创建文档片段
let list = document.createElement("ul");
for(let i = 0; i < 4; i++)
let li_node = document.createElement("li");
li_node.appendChild(document.createTextNode("Item " + (i+1)));
fragment.appendChild(li_node);
list.appendChild(fragment);
div3.appendChild(list);
</script>
</body>
</html>
第二题
1. 使用HTML DOM提供的的属性和⽅法,动态的创建⼀个6⾏4列的表格,每列信息分别是⼀位同学的姓名,学号,成绩和绩点。
2. 针对上述表格数据,计算出六个同学的平均成绩和平均绩点,请使用动态脚本的操作⽅式。
3. 针对上述表格数据,把低于平均绩点的同学,用黄⾊标记出来,请使用动态脚本的操作⽅式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 创建table
let table = document.createElement("table");
table.border = 1;
table.width = "100%";
// 创建tbody
let tbody = document.createElement("tbody");
table.appendChild(tbody);
// 创建一个增加一行列表的函数
function addOneRow(row_index, col_num, col)
tbody.insertRow(row_index);
for(let i = 0; i < col_num; i++)
tbody.rows[row_index].insertCell(i);
tbody.rows[row_index].cells[i].appendChild(document.createTextNode(col[i]));
addOneRow(0, 4,["姓名", "学号", "成绩", "绩点"]);
addOneRow(1, 4, ["张三", "190350201", "95", "4.5"]);
addOneRow(2, 4, ["李四", "190350202", "89", "3.5"]);
addOneRow(3, 4, ["王五", "190350203", "63", "1"]);
addOneRow(4, 4, ["赵六", "190350204", "70", "2"]);
addOneRow(5, 4, ["钱七", "190350205", "82", "3"]);
addOneRow(6, 4, ["孙八", "190350206", "90", "4"]);
document.body.appendChild(table);
// 计算平均成绩和平均绩点
let row = 6, col = 4;
let sum_grade = 0, sum_gpa = 0;
for(let i = 1; i <= row; i++)
sum_grade += parseInt(table.childNodes[0].rows[i].cells[2].childNodes[0].nodeValue);
sum_gpa += parseFloat(table.childNodes[0].rows[i].cells[3].childNodes[0].nodeValue);
console.log("平均成绩:" + sum_grade / row);
console.log("平均绩点:" + sum_gpa / row);
// 把低于平均绩点的同学,用黄⾊标记出来
let style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode(".highlight background-color: yellow; "));
let head = document.getElementsByTagName("head")[0];
head.appendChild(style);
let avg_gpa = sum_gpa / row; // 平均绩点
for(let i = 1; i <= row; i++)
let targetNode = table.childNodes[0].rows[i].cells[3];
let gpa = parseFloat(targetNode.childNodes[0].nodeValue);
if(gpa < avg_gpa)
targetNode.className = "highlight";
</script>
</body>
</html>
以上是关于js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格的主要内容,如果未能解决你的问题,请参考以下文章