HTML实现可编辑表格

目录

要求：

实现思路：

表单数据： 

逻辑代码： 

样例测试：

效果图： 

要求：

（1）页面中的数据表格通常承载了用户所需的数据，通常用户需要根据实际
情况对部分数据进行修改。
（2）当点击表格中可编辑数据时，在当前单元格中显示文本框并在其中显示
原数据，从而为用户提供修改该数据的输入域。
（a）在编辑模式下点击文本框之外的任何区域即可确认输入。
（b）在编辑模式下输入数据不符合要求时，应该给出适当的提示，并强制
改正后方可确认输入。

实现思路：

1. 为表格中可编辑列的单元格添加 click 事件监听器；
2. 在事件处理函数中，获取单元格中的原数据，并将其替换为一个文本框；
3. 在文本框中显示原数据，并为其添加 blur 事件监听器；
4. 在 blur 事件处理函数中，获取文本框中的新数据，并进行验证；
5. 如果新数据符合验证规则，则更新单元格中的数据，并将文本框替换为新数据；
6. 如果新数据不符合验证规则，则给出适当的提示，并保留文本框以便用户修改。

表单数据： 

1.  
   <table id="editable-table">
2.  
   <thead>
3.  
   <tr>
4.  
   <th>姓名</th>
5.  
   <th>年龄</th>
6.  
   <th>性别</th>
7.  
   <th>邮箱</th>
8.  
   </tr>
9.  
   </thead>
10.  
    <tbody>
11.  
    <tr>
12.  
    <td class="editable">张三</td>
13.  
    <td class="editable">18</td>
14.  
    <td>男</td>
15.  
    <td class="editable">zhangsan@example.com</td>
16.  
    </tr>
17.  
    <tr>
18.  
    <td class="editable">李四</td>
19.  
    <td class="editable">20</td>
20.  
    <td>女</td>
21.  
    <td class="editable">lisi@example.com</td>
22.  
    </tr>
23.  
    <tr>
24.  
    <td class="editable">王五</td>
25.  
    <td class="editable">22</td>
26.  
    <td>男</td>
27.  
    <td class="editable">wangwu@example.com</td>
28.  
    </tr>
29.  
    </tbody>
30.  
    </table>

逻辑代码： 

1.  
   function makeEditable(tableId, config) {
2.  
   // 默认配置
3.  
   const defaultConfig = {
4.  
   editableColumns: [], // 可编辑列的下标（从 0 开始）
5.  
   validationRules: {}, // 验证规则
6.  
   style: {} // 样式
7.  
   };
8.  
   // 合并配置
9.  
   const mergedConfig = Object.assign(defaultConfig, config);
10.  
    // 获取表格元素
11.  
    const table = document.getElementById(tableId);
12.  
    // 获取表头和表体
13.  
    const thead = table.querySelector('thead');
14.  
    const tbody = table.querySelector('tbody');
15.  
    // 获取所有可编辑单元格
16.  
    const editableCells = Array.from(tbody.querySelectorAll('.editable'));
17.  
    // 为每个可编辑单元格添加 click 事件监听器
18.  
    editableCells.forEach(cell => {
19.  
    cell.addEventListener('click', () => {
20.  
    // 获取单元格中的原数据
21.  
    const originalData = cell.textContent;
22.  
    // 创建一个文本框
23.  
    const input = document.createElement('input');
24.  
    // 设置文本框的初始值为原数据
25.  
    input.value = originalData;
26.  
    // 将文本框插入到单元格中
27.  
    cell.textContent = '';
28.  
    cell.appendChild(input);
29.  
    // 设置文本框的样式
30.  
    Object.assign(input.style, mergedConfig.style.input);
31.  
    // 为文本框添加 blur 事件监听器
32.  
    input.addEventListener('blur', () => {
33.  
    // 获取文本框中的新数据
34.  
    const newData = input.value;
35.  
    // 获取单元格的下标
36.  
    const cellIndex = Array.from(cell.parentElement.children).indexOf(cell);
37.  
    // 判断单元格是否可编辑
38.  
    if (mergedConfig.editableColumns.includes(cellIndex)) {
39.  
    // 获取验证规则
40.  
    const validationRule = mergedConfig.validationRules[cellIndex];
41.  
    // 验证新数据是否符合规则
42.  
    if (validationRule && !validationRule.test(newData)) {
43.  
    // 不符合规则，给出提示
44.  
    alert('输入的数据不符合要求，请重新输入！');
45.  
    // 保留文本框
46.  
    input.focus();
47.  
    } else {
48.  
    // 符合规则，更新单元格中的数据
49.  
    cell.textContent = newData;
50.  
    }
51.  
    } else {
52.  
    // 单元格不可编辑，直接更新数据
53.  
    cell.textContent = newData;
54.  
    }
55.  
    });
56.  
    // 让文本框获得焦点
57.  
    input.focus();
58.  
    });
59.  
    });
60.  
    }

样例测试：

1.  
   makeEditable('editable-table', {
2.  
   editableColumns: [1, 3], // 年龄和邮箱列可编辑
3.  
   validationRules: {
4.  
   1: /^\d $/, // 年龄必须是数字
5.  
   3: /^. @. \.. $/ // 邮箱必须符合格式要求
6.  
   },
7.  
   style: {
8.  
   input: {
9.  
   width: '100%',
10.  
    boxSizing: 'border-box',
11.  
    padding: '4px',
12.  
    border: '1px solid #ccc',
13.  
    borderRadius: '4px'
14.  
    }
15.  
    }
16.  
    });

效果图：

这篇好文章是转载于：学新通技术网