js练习6 --- DOM文本节点的操作、动态脚本、动态样式、操作表格

本文链接：https://blog.csdn.net/YINZHE__/article/details/124891756

第一题

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>