table表格标签渲染数据

【问题描述】 

1、用table表格标签渲染以下数据，表格第一列是学生总分排名，最后一列是学生总分。

图1-1 原始表格数据

2、还是采用上方相同的原始表格数据，采用相同的渲染规则，只渲染所有科目都及格的学生。

【代码实现】

1、渲染所有的学生

<!-- 计算每个学生的总分 -->
<script>
    // 创建一个数组，存储每个学生的姓名和成绩
    var students = [
      {name: "Bob", math: 97, chinese: 89, english: 67},
      {name: "Tom", math: 67, chinese: 52, english: 98},
      {name: "Jerry", math: 72, chinese: 87, english: 89},
      {name: "Ben", math: 92, chinese: 87, english: 59},
      {name: "Chan", math: 47, chinese: 85, english: 92}
    ];
  
    // 遍历数组，计算每个学生的总分，并添加到对象中
    for (var i = 0; i < students.length; i++) {
      var total = students[i].math + students[i].chinese + students[i].english;
      students[i].total = total;
    }
  
    // 按照总分从高到低排序数组，使用冒泡排序算法
    for (var i = 0; i < students.length - 1; i++) {
      for (var j = 0; j < students.length - 1 - i; j++) {
        if (students[j].total < students[j + 1].total) {
          var temp = students[j];
          students[j] = students[j + 1];
          students[j + 1] = temp;
        }
      }
    }
  </script>
  
  <!-- 用table表格标签渲染数据 -->
  <table border="1">
    <!-- 表格标题 -->
    <caption>学生成绩表</caption>
    <!-- 表格头部 -->
    <thead>
      <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>数学</th>
        <th>语文</th>
        <th>英语</th>
        <th>总分</th>
      </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
      <!-- 遍历数组，创建表格行 -->
      <script>
        for (var i = 0; i < students.length; i++) {
          // 创建一个tr元素
          var tr = document.createElement("tr");
          // 创建一个td元素，存储排名
          var td_rank = document.createElement("td");
          td_rank.innerText = i + 1;
          // 创建一个td元素，存储姓名
          var td_name = document.createElement("td");
          td_name.innerText = students[i].name;
          // 创建一个td元素，存储数学成绩
          var td_math = document.createElement("td");
          td_math.innerText = students[i].math;
          // 创建一个td元素，存储语文成绩
          var td_chinese = document.createElement("td");
          td_chinese.innerText = students[i].chinese;
          // 创建一个td元素，存储英语成绩
          var td_english = document.createElement("td");
          td_english.innerText = students[i].english;
          // 创建一个td元素，存储总分
          var td_total = document.createElement("td");
          td_total.innerText = students[i].total;
          // 将td元素添加到tr元素中
          tr.appendChild(td_rank);
          tr.appendChild(td_name);
          tr.appendChild(td_math);
          tr.appendChild(td_chinese);
          tr.appendChild(td_english);
          tr.appendChild(td_total);
          // 将tr元素添加到tbody元素中
          document.querySelector("tbody").appendChild(tr);
        }
      </script>
    </tbody>
  </table>
  

2、渲染所有科目都及格的学生 

<!-- 计算每个学生的总分 -->
<script>
    // 创建一个数组，存储每个学生的姓名和成绩
    var students = [
      {name: "Bob", math: 97, chinese: 89, english: 67},
      {name: "Tom", math: 67, chinese: 52, english: 98},
      {name: "Jerry", math: 72, chinese: 87, english: 89},
      {name: "Ben", math: 92, chinese: 87, english: 59},
      {name: "Chan", math: 47, chinese: 85, english: 92}
    ];
  
    // 遍历数组，计算每个学生的总分，并添加到对象中
    for (var i = 0; i < students.length; i++) {
      var total = students[i].math + students[i].chinese + students[i].english;
      students[i].total = total;
    }
  
    // 按照总分从高到低排序数组，使用冒泡排序算法
    for (var i = 0; i < students.length - 1; i++) {
      for (var j = 0; j < students.length - 1 - i; j++) {
        if (students[j].total < students[j + 1].total) {
          var temp = students[j];
          students[j] = students[j + 1];
          students[j + 1] = temp;
        }
      }
    }
  </script>
  
  <!-- 用table表格标签渲染数据 -->
  <table border="1">
    <!-- 表格标题 -->
    <caption>学生成绩表</caption>
    <!-- 表格头部 -->
    <thead>
      <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>数学</th>
        <th>语文</th>
        <th>英语</th>
        <th>总分</th>
      </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
      <!-- 遍历数组，创建表格行 -->
      <script>
        // 创建一个变量，记录排名
        var rank = 1;
        for (var i = 0; i < students.length; i++) {
          // 判断是否所有科目都及格
          if (students[i].math >= 60 && students[i].chinese >= 60 && students[i].english >= 60) {
            // 创建一个tr元素
            var tr = document.createElement("tr");
            // 创建一个td元素，存储排名
            var td_rank = document.createElement("td");
            td_rank.innerText = rank;
            // 创建一个td元素，存储姓名
            var td_name = document.createElement("td");
            td_name.innerText = students[i].name;
            // 创建一个td元素，存储数学成绩
            var td_math = document.createElement("td");
            td_math.innerText = students[i].math;
            // 创建一个td元素，存储语文成绩
            var td_chinese = document.createElement("td");
            td_chinese.innerText = students[i].chinese;
            // 创建一个td元素，存储英语成绩
            var td_english = document.createElement("td");
            td_english.innerText = students[i].english;
            // 创建一个td元素，存储总分
            var td_total = document.createElement("td");
            td_total.innerText = students[i].total;
            // 将td元素添加到tr元素中
            tr.appendChild(td_rank);
            tr.appendChild(td_name);
            tr.appendChild(td_math);
            tr.appendChild(td_chinese);
            tr.appendChild(td_english);
            tr.appendChild(td_total);
            // 将tr元素添加到tbody元素中
            document.querySelector("tbody").appendChild(tr);
            // 排名加一
            rank++;
          }
        }
      </script>
    </tbody>
  </table>
  

【效果展示】 

图1 渲染所有的学生

 图2 渲染所有科目都及格的学生