第 1 步：把行数据搬进数组#

每一行需要展示 5 个字段（头像统一用一张图，省得来回换地址），用 15 篇的”数组里放对象”：

1
// 员工数据：数据是"真身"，页面只是它的影子
2
let emps = [
3
  { name: '令狐冲', gender: '男', position: '讲师',     entryDate: '2021-06-15', lastTime: '2024-09-16 15:30' },
4
  { name: '任盈盈', gender: '女', position: '咨询师',   entryDate: '2021-07-20', lastTime: '2024-09-17 09:00' },
5
  { name: '向问天', gender: '男', position: '班主任',   entryDate: '2021-05-01', lastTime: '2024-09-15 17:45' },
6
  { name: '任我行', gender: '男', position: '教研主管', entryDate: '2021-05-01', lastTime: '2024-09-15 17:45' },
7
  { name: '田伯光', gender: '男', position: '班主任',   entryDate: '2021-06-15', lastTime: '2024-09-16 15:30' }
8
];

第 2 步：写一个 render()，把数据”画”成表格行#

tbody 里的行先全部清空，再用循环 + 模板字符串拼出所有行，最后一次性塞给 innerHTML：

1
let tbody = document.querySelector('tbody');
2

3
// 按数据渲染表格：数据有几条，页面就有几行
4
function render() {
5
  let html = '';
6
  for (let i = 0; i < emps.length; i++) {
7
    html += `<tr>
8
      <td>${emps[i].name}</td>
9
      <td>${emps[i].gender}</td>
10
      <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="${emps[i].name}"></td>
11
      <td>${emps[i].position}</td>
12
      <td>${emps[i].entryDate}</td>
13
      <td>${emps[i].lastTime}</td>
14
      <td class="action-buttons">
15
        <button type="button" class="del">删除</button>
16
      </td>
17
    </tr>`;
18
  }
19
  tbody.innerHTML = html; // 整体替换：旧行连同旧事件一起被换掉
20
}

第 3 步：隔行换色抽成函数 stripe()#

案例一的代码现在不能只跑一次了（每次重新渲染后都是新行，颜色要重刷），所以把它包成函数，渲染完就调用：

1
// 隔行换色：把案例一的逻辑包成函数，随时可以再调用一次
2
function stripe() {
3
  let trList = document.querySelectorAll('tbody tr');
4
  for (let i = 0; i < trList.length; i++) {
5
    if (i % 2 == 0) {
6
      trList[i].style.backgroundColor = '#f2e2e2';
7
    } else {
8
      trList[i].style.backgroundColor = '#e6f7ff';
9
    }
10
  }
11
}

第 4 步：给”删除”按钮接上事件#

点删除 → 先从数据里删掉这一条 → 再重新渲染、重新上色、重新绑事件：

1
// 给每一行的删除按钮绑事件（每次渲染后都要重新绑，因为按钮是新的）
2
function bindDelete() {
3
  let delBtns = document.querySelectorAll('.del');
4
  for (let i = 0; i < delBtns.length; i++) {
5
    delBtns[i].addEventListener('click', function () {
6
      emps.splice(i, 1); // 1. 数据里删掉这一条（i 就是这一行对应的数据下标）
7
      render();          // 2. 按新数据重新渲染表格
8
      stripe();          // 3. 重新隔行换色
9
      bindDelete();      // 4. 新按钮要重新绑事件
10
    });
11
  }
12
}

页面加载时依次调用三个函数，就完成了一次”从数据到页面”的完整流程：

1
render();      // 先有行
2
stripe();      // 再上色
3
bindDelete();  // 最后绑事件

效果#

一、知识回顾（读完直接做下面的实践题）#

1. 这一篇的页面来自 12 篇的 Tlias 员工管理页面：四个区域是顶部导航栏 / 搜索表单区域 / 表格数据展示区域 / 底部版权区域，JS 主要操作表格；表头在 <thead>、数据行在 <tbody>
2. 脚本要写在 </body> 前面：JS 从上往下执行，脚本放 <head> 里时表格还不存在，document.querySelector 拿到 null，再访问它的属性会报 Cannot read properties of null
3. 只选数据行的写法是 document.querySelectorAll('tbody tr')；写成 querySelectorAll('tr') 会把 thead 里的表头行也选进来
4. 案例一（表格隔行换色）：拿到所有数据行 → for (let i = 0; i < trList.length; i++) → i % 2 == 0 是页面上数下来的奇数行（因为索引从 0 开始）→ style.backgroundColor 奇数行 #f2e2e2、偶数行 #e6f7ff
5. 案例二（鼠标移入移出）：用循环给每一行都绑监听，'mouseenter' 时背景色 #f2e2e2、'mouseleave' 时设回 #fff；事件源是 trs[i] 或回调里的 this
6. 两个案例合用的两个冲突：querySelectorAll('tr') 让表头也变色；mouseleave 写死 #fff 会覆盖掉隔行色——改法是只选 tbody tr，并在移出时按 i % 2 还原本来的隔行色
7. render() 数据渲染：先 let html = ''，用 for 循环 + 模板字符串（${emps[i].name}）一行行拼 <tr>…</tr>，最后 tbody.innerHTML = html 一次性替换——innerHTML 是整体替换，旧行和旧事件一起被丢掉
8. stripe() 隔行换色：把案例一包成函数，每次重新渲染后都要调用一次（行是新的，颜色要重新刷）
9. bindDelete() 删除交互：querySelectorAll('.del') 拿到删除按钮 → 循环绑 'click' → 回调里 emps.splice(i, 1) 删数据 → render() → stripe() → bindDelete() 重新绑事件（渲染出来的按钮是新的，不重绑就点了没反应）
10. 数据驱动的思想：emps 数组是唯一真身，页面是它的渲染结果——改数据 → 重新渲染；下一章 Vue 的 v-for 就是把”循环拼字符串”这一步自动化了

二、裸写题#

• 2-1 用数据渲染表格 页面上有一张员工表（表头 3 列：姓名、性别、职位），tbody 是空的。要求：

  1. 定义一个数组，里面放 3 个员工对象（字段：姓名、性别、职位，数据自己编）
  2. 用循环把每一条数据拼成一行 HTML（一行一个 <tr>），最后拼成一个整字符串
  3. 一次性塞进 tbody 渲染出来 （练习文件 test_18_数据渲染表格.html 里已经准备好了表头和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：先把数据准备成”数组里放对象”，再”把每条数据翻译成一行 HTML”，最后整体交给表格 二级 · 方法：let emps = [ { name: '...', gender: '...', position: '...' }, ... ]；循环 for (let i = 0; i < emps.length; i++)；拼字符串用反引号模板 + ${emps[i].name}；塞进去用 tbody.innerHTML = html 三级 · 骨架：let emps = [ { name: '____', gender: '男', position: '____' }, … ]; / let html = ''; / html += \${emps[i].}…`;/document.querySelector('').innerHTML = html;`

  参考答案（做完再点开）

  1
  // 1. 数据：数组里放对象
  2
  let emps = [
  3
    { name: '令狐冲', gender: '男', position: '讲师' },
  4
    { name: '任盈盈', gender: '女', position: '咨询师' },
  5
    { name: '向问天', gender: '男', position: '班主任' }
  6
  ];
  7
  
  8
  // 2. 拼字符串：一条数据一行 tr
  9
  let html = '';
  10
  for (let i = 0; i < emps.length; i++) {
  11
    html += `<tr>
  12
      <td>${emps[i].name}</td>
  13
      <td>${emps[i].gender}</td>
  14
      <td>${emps[i].position}</td>
  15
    </tr>`;
  16
  }
  17
  
  18
  // 3. 一次性渲染到 tbody
  19
  document.querySelector('tbody').innerHTML = html;

  显示更多显示更少

  三个检查点：① 页面出现 3 行数据，顺序和数组一致；② 把数组里加一条数据、刷新页面，页面自动多一行（不用手改 HTML——这就是数据驱动的意义）；③ 用的是 tbody 而不是 table，不要把表头覆盖掉。

• 2-2 给删除按钮接上事件 页面上有一张 4 行数据的员工表，每行最后一列都有一个”删除”按钮（class 为 del）。要求：点击某一行的删除按钮，这一行从表格里消失，其他行不受影响。 （练习文件 test_18_删除行.html 里已经准备好了表格和写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：按钮是”每一行都有”，所以要循环绑定；点击后要弄掉的是按钮所在的那一整行 二级 · 方法：document.querySelectorAll('.del') + for 循环绑 'click'；用 this.parentElement.parentElement 从按钮往上找到 <tr>（按钮 → td → tr）；删掉元素用 元素.remove() 换个思路：在循环里用行下标 i 直接找行也行（trList[i].remove()），前提是行和按钮的顺序一一对应 三级 · 骨架：let trList = document.querySelectorAll('tbody tr'); / let btns = document.querySelectorAll('____'); / btns[i].addEventListener('____', function () { let tr = this.________.________; tr.____(); });

  参考答案（做完再点开）

  1
  let btns = document.querySelectorAll('.del');
  2
  
  3
  for (let i = 0; i < btns.length; i++) {
  4
    btns[i].addEventListener('click', function () {
  5
      // 按钮的父节点是 td，td 的父节点就是这一整行 tr
  6
      let tr = this.parentElement.parentElement;
  7
      tr.remove();   // 把这一行从页面里删掉
  8
    });
  9
  }

  也可以写成循环 + 下标的方式（用行集合，不用往上找父节点）：

  1
  let trList = document.querySelectorAll('tbody tr');
  2
  let btns = document.querySelectorAll('.del');
  3
  for (let i = 0; i < btns.length; i++) {
  4
    btns[i].addEventListener('click', function () {
  5
      trList[i].remove();   // 第 i 个按钮对应第 i 行
  6
    });
  7
  }

  检查点：点哪一行的按钮，只有那一行消失；点完表头和其他行都还在。注意 trList 是当时那一刻的快照：删一行之后，这个集合和我们肉眼数的行号就对不上了——所以更复杂的增删（如综合题）要改成”删数据 → 整体重新渲染”的套路。

• 2-3 隔行换色 + 鼠标移入高亮（两者共存） 页面上有一张 5 行数据的员工表。要求同时做到两件事，而且不能互相破坏：

  1. 隔行换色：奇数行 #f2e2e2、偶数行 #e6f7ff
  2. 鼠标移入某一行时这一行变成 #d0e8ff 高亮，移出时还原成它本来的隔行色（不能一片白） （练习文件 test_18_隔行换色与鼠标高亮.html 里已经准备好了表格和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：第 1 件事是 16 篇的案例一；第 2 件事是 17 篇的案例二，但”移出”要把颜色算回去，而不是写死白色 二级 · 方法：document.querySelectorAll('tbody tr')；i % 2 == 0 判断奇数行；'mouseenter' / 'mouseleave' 两个事件；移出时用 (i % 2 == 0) ? '#f2e2e2' : '#e6f7ff' 还原 三级 · 骨架：let trs = document.querySelectorAll('____ tr'); / 第一个循环按 i % 2 上隔行色 / 第二个循环里绑两个事件：mouseenter → '#d0e8ff'、mouseleave → (i ____ 2 == 0) ? '#f2e2e2' : '____'

  参考答案（做完再点开）

  1
  let trs = document.querySelectorAll('tbody tr');
  2
  
  3
  // 1. 隔行换色
  4
  for (let i = 0; i < trs.length; i++) {
  5
    trs[i].style.backgroundColor = (i % 2 == 0) ? '#f2e2e2' : '#e6f7ff';
  6
  }
  7
  
  8
  // 2. 鼠标移入移出：移入高亮，移出还原本来的隔行色
  9
  for (let i = 0; i < trs.length; i++) {
  10
    trs[i].addEventListener('mouseenter', function () {
  11
      this.style.backgroundColor = '#d0e8ff';
  12
    });
  13
    trs[i].addEventListener('mouseleave', function () {
  14
      this.style.backgroundColor = (i % 2 == 0) ? '#f2e2e2' : '#e6f7ff';
  15
    });
  16
  }

  显示更多显示更少

  检查点：① 页面是”粉、蓝、粉、蓝…”；② 鼠标压住某行时变浅蓝 #d0e8ff；③ 鼠标移开后这一行回到它原来的颜色（第 1 行回粉、第 2 行回蓝），而不是变成白色或统一颜色。

三、综合题#

• 3-1 做一个”JS 版员工列表”（渲染 + 高亮 + 删除） 页面上有一张员工表（表头 5 列：姓名、性别、职位、入职日期、操作）和一个”共 N 人”的统计行（#count）。要求做出一个数据驱动的小页面，按下面的步骤来：

  1. 定义一个员工数组 emps，放 4 个员工对象（字段：姓名、性别、职位、入职日期，数据自己编）
  2. 写 render()：按数组把每一条数据渲染成一行，整体放进 tbody，每行最后一列放一个”删除”按钮（class 为 del）
  3. 写 stripe()：给数据行做隔行换色（奇数行 #f2e2e2、偶数行 #e6f7ff），渲染后调用
  4. 写 bindDelete()：给每个删除按钮绑点击事件——先从 emps 里 splice 掉这一条数据，再 render() → stripe() → bindDelete()
  5. 写 updateCount()：把 共 N 人 更新成当前数组长度，每次渲染后调用
  6. 页面加载时依次调用 render() → stripe() → bindDelete() → updateCount()
  7. 鼠标移入某一行时高亮 #d0e8ff，移出还原成该行本来的隔行色（绑在 render() 里或单独写函数都行） （练习文件 test_18_综合_员工列表.html 里已经准备好了表格、统计行和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：整页只有一份”真身”（emps 数组），其余全是它的展示——所以每次改数据后，把所有”展示动作”重跑一遍：渲染、上色、绑事件、更新人数 二级 · 方法：render() 用循环拼字符串再 tbody.innerHTML = html；stripe() 用 querySelectorAll('tbody tr') + i % 2；bindDelete() 用 querySelectorAll('.del') + addEventListener('click', …) + emps.splice(i, 1)；人数用 document.querySelector('#count').innerText = \共 ${emps.length} 人` **三级 · 骨架**：function render() { let html = ”; for (…) { html += `…删除`; } tbody.innerHTML = ; }/function stripe() { … }/function bindDelete() { let btns = document.querySelectorAll(''); for (…) { btns[i].addEventListener(‘click’, function () { emps.____(i, 1); render(); ____(); bindDelete(); updateCount(); }); } }/ 最后render(); stripe(); bindDelete(); updateCount();`

  参考答案（做完再点开）

  1
  // ===== 数据：唯一真身 =====
  2
  let emps = [
  3
    { name: '令狐冲', gender: '男', position: '讲师',     entryDate: '2021-06-15' },
  4
    { name: '任盈盈', gender: '女', position: '咨询师',   entryDate: '2021-07-20' },
  5
    { name: '向问天', gender: '男', position: '班主任',   entryDate: '2021-05-01' },
  6
    { name: '任我行', gender: '男', position: '教研主管', entryDate: '2021-05-01' }
  7
  ];
  8
  
  9
  let tbody = document.querySelector('tbody');
  10
  
  11
  // ===== 1. 渲染表格 =====
  12
  function render() {
  13
    let html = '';
  14
    for (let i = 0; i < emps.length; i++) {
  15
      html += `<tr>
  16
        <td>${emps[i].name}</td>
  17
        <td>${emps[i].gender}</td>
  18
        <td>${emps[i].position}</td>
  19
        <td>${emps[i].entryDate}</td>
  20
        <td><button type="button" class="del">删除</button></td>
  21
      </tr>`;
  22
    }
  23
    tbody.innerHTML = html;
  24
  }
  25
  
  26
  // ===== 2. 隔行换色 =====
  27
  function stripe() {
  28
    let trs = document.querySelectorAll('tbody tr');
  29
    for (let i = 0; i < trs.length; i++) {
  30
      trs[i].style.backgroundColor = (i % 2 == 0) ? '#f2e2e2' : '#e6f7ff';
  31
    }
  32
  }
  33
  
  34
  // ===== 3. 鼠标移入高亮、移出还原 =====
  35
  function bindHover() {
  36
    let trs = document.querySelectorAll('tbody tr');
  37
    for (let i = 0; i < trs.length; i++) {
  38
      trs[i].addEventListener('mouseenter', function () {
  39
        this.style.backgroundColor = '#d0e8ff';
  40
      });
  41
      trs[i].addEventListener('mouseleave', function () {
  42
        this.style.backgroundColor = (i % 2 == 0) ? '#f2e2e2' : '#e6f7ff';
  43
      });
  44
    }
  45
  }
  46
  
  47
  // ===== 4. 删除：先删数据，再整体重渲染 =====
  48
  function bindDelete() {
  49
    let btns = document.querySelectorAll('.del');
  50
    for (let i = 0; i < btns.length; i++) {
  51
      btns[i].addEventListener('click', function () {
  52
        emps.splice(i, 1);   // 删除数据里对应的一条
  53
        refresh();           // 数据变了，整套展示重刷一遍
  54
      });
  55
    }
  56
  }
  57
  
  58
  // ===== 5. 统计人数 =====
  59
  function updateCount() {
  60
    document.querySelector('#count').innerText = `共 ${emps.length} 人`;
  61
  }
  62
  
  63
  // ===== 6. 展示层统一入口：数据一变就调它 =====
  64
  function refresh() {
  65
    render();
  66
    stripe();
  67
    bindHover();
  68
    bindDelete();
  69
    updateCount();
  70
  }
  71
  
  72
  // 页面加载时先跑一遍
  73
  refresh();

  显示更多显示更少

  四个检查点：① 页面一开始就有 4 行、人数显示”共 4 人”；② 行颜色是”粉蓝粉蓝”交替；③ 鼠标压住某行变浅蓝、移开回到本来的颜色；④ 点删除后这一行消失、剩下的行颜色重新交替、人数变成”共 3 人”，连续删几行都不会错位（因为每次都是”删数据 + 整体重渲染”，索引永远对得上）。 想想为什么把五个函数收进一个 refresh()：“数据变了要刷新界面”这件事只有一处出口，将来加一个”新增员工”只需要在改完数据后调一次 refresh()——这就是下一章 Vue 里”数据一变、页面自己变”的手动版。