安康免费做网站公司帮人做微信是哪个网站

安康免费做网站公司,帮人做微信是哪个网站,网站建设 会员可以看的内容更多,四川短视频seo优化网站在前端开发中#xff0c;动态表格是一个非常基础且高频的需求#xff0c;比如后台管理系统的列表操作、数据展示页面的行管理等。本文将带大家从零开始#xff0c;使用原生 JavaScript实现一个支持行添加、行删除、隔行变色的动态表格#xff0c;全程不依赖任何框架#x…在前端开发中动态表格是一个非常基础且高频的需求比如后台管理系统的列表操作、数据展示页面的行管理等。本文将带大家从零开始使用原生 JavaScript实现一个支持行添加、行删除、隔行变色的动态表格全程不依赖任何框架深入理解 DOM 操作与事件处理的核心逻辑。一、需求分析我们需要实现的动态表格具备以下功能点击 “按钮” 新增一行数据序号自动递增数字以 100 为步长累加点击每行的 “删除” 按钮移除当前行表格自动实现隔行变色效果且删除行后样式自动重新校准全程使用原生 DOM 操作不拼接 HTML 字符串保证代码安全性与可维护性。二、技术选型与核心原理1. 技术选型HTML搭建表格的基础结构使用thead定义表头tbody承载动态行CSS定义隔行变色的样式类通过类名的添加 / 移除实现样式切换原生 JavaScriptDOM 创建document.createElement()动态生成行、单元格、按钮DOM 操作appendChild()实现节点的层级挂载事件委托利用事件冒泡机制给tbody绑定点击事件处理删除逻辑样式控制classList.add()/classList.remove()操作元素类名。2. 核心原理动态创建 DOM 节点不使用innerHTML拼接 HTML而是通过createElement创建tr、td、button等节点再通过appendChild挂载到父节点上避免 XSS 风险事件委托删除按钮是动态生成的无法直接绑定事件因此给父元素tbody绑定点击事件通过事件对象e.target判断点击的是否为删除按钮实现动态元素的事件处理样式重绘每次新增或删除行后重新遍历所有行根据行的索引重新计算并设置隔行变色样式保证样式始终正确。三、完整代码实现1. HTML 结构html预览!DOCTYPE html html head meta charsetutf-8 title原生JS动态表格/title style table { border-collapse: collapse; margin-top: 10px; width: 400px; } th, td { border: 1px solid #333; padding: 8px 12px; text-align: center; } .blue-bg { background-color: #cce5ff; } button { padding: 4px 8px; cursor: pointer; } /style /head body button onclickselectAll()新增行/button table classstudent thead tr th序号/th th数字/th th操作/th /tr /thead tbody !-- 动态行将插入这里 -- /tbody /table script // 初始化序号与数字 let currentIndex 0; let num 100; /** * 新增行函数 */ function selectAll() { // 1. 获取tbody容器 const tbody document.querySelector(tbody); // 2. 创建tr行节点 const tr document.createElement(tr); // 3. 创建序号单元格 const tdIndex document.createElement(td); tdIndex.textContent currentIndex 1; tr.appendChild(tdIndex); // 4. 创建数字单元格 const tdNum document.createElement(td); num 100; tdNum.textContent num; tr.appendChild(tdNum); // 5. 创建操作单元格包含删除按钮 const tdWork document.createElement(td); const delBtn document.createElement(button); delBtn.textContent 删除; tdWork.appendChild(delBtn); tr.appendChild(tdWork); // 6. 将行添加到tbody tbody.appendChild(tr); // 7. 更新序号 currentIndex; // 8. 重新渲染隔行变色 renderRowStyle(); } /** * 事件委托 - 处理删除逻辑 */ document.querySelector(.student tbody).addEventListener(click, function(e) { // 判断点击的是否为删除按钮 if (e.target.tagName BUTTON e.target.textContent 删除) { // 获取当前行并移除 const targetTr e.target.parentElement.parentElement; targetTr.remove(); // 重新渲染隔行变色 renderRowStyle(); } }); /** * 渲染隔行变色样式 */ function renderRowStyle() { // 获取所有行 const trList document.querySelectorAll(tbody tr); // 遍历所有行重置样式并重新设置 for (let i 0; i trList.length; i) { trList[i].classList.remove(blue-bg); // 偶数行索引1为偶数添加蓝色背景 if ((i 1) % 2 0) { trList[i].classList.add(blue-bg); } } } /script /body /html2. 代码分模块解析1HTML 与 CSS 部分HTML 结构使用table标签搭建表格thead定义表头的 “序号、数字、操作” 三列tbody用于承载动态生成的行CSS 样式border-collapse: collapse合并表格边框让表格更美观.blue-bg类定义隔行变色的背景色给按钮、单元格添加内边距和居中样式提升用户体验。2JavaScript 部分初始化变量javascript运行let currentIndex 0; // 记录当前序号 let num 100; // 记录初始数字两个变量分别用于控制新增行的序号递增和数字累加。新增行函数selectAll()步骤 1获取tbody容器作为动态行的父节点步骤 2通过document.createElement()依次创建tr行、td单元格、button删除按钮步骤 3使用textContent设置单元格和按钮的文本内容数字以 100 为步长累加步骤 4通过appendChild()将子节点依次挂载到父节点上形成tbody → tr → td的层级结构步骤 5调用renderRowStyle()函数重新渲染隔行变色样式。事件委托实现删除功能javascript运行document.querySelector(.student tbody).addEventListener(click, function(e) { if (e.target.tagName BUTTON e.target.textContent 删除) { const targetTr e.target.parentElement.parentElement; targetTr.remove(); renderRowStyle(); } });核心逻辑利用事件冒泡点击删除按钮时事件会冒泡到tbody上通过e.target判断触发事件的元素是否为删除按钮通过parentElement向上查找获取当前行tr并调用remove()方法移除移除后调用renderRowStyle()重新校准样式。隔行变色函数renderRowStyle()javascript运行function renderRowStyle() { const trList document.querySelectorAll(tbody tr); for (let i 0; i trList.length; i) { trList[i].classList.remove(blue-bg); if ((i 1) % 2 0) { trList[i].classList.add(blue-bg); } } }遍历所有行先移除所有行的.blue-bg类避免样式残留判断行的索引i1是否为偶数若是则添加.blue-bg类实现隔行变色每次新增或删除行后都调用该函数保证样式始终正确。四、功能测试与优化点1. 功能测试新增行点击 “新增行” 按钮表格会新增一行序号依次为 1、2、3...数字依次为 200、300、400...偶数行自动显示蓝色背景删除行点击某行的 “删除” 按钮该行会被移除剩余行的隔行变色样式会自动重新计算保持正确样式稳定性无论新增多少行、删除任意行隔行变色的效果始终稳定不会出现错乱。2. 优化点序号优化当前代码中currentIndex在删除行后不会重置若需要删除行后序号重新连续可在renderRowStyle()函数中遍历行并重新设置序号数据持久化可将表格数据存储在数组中新增行时向数组添加数据删除行时从数组移除数据实现 “数据驱动视图”空表格提示当表格没有行时可在tbody中添加 “暂无数据” 的提示行提升用户体验。五、总结与拓展本文通过原生 JavaScript 实现了动态表格的增删与隔行变色核心是掌握DOM 动态创建、事件委托和样式重绘这三个知识点。这些知识点是前端开发的基础也是学习 Vue、React 等框架的前置条件 —— 框架的底层原理正是基于这些原生 API 封装而来。拓展方向实现表格数据的本地存储localStorage刷新页面后数据不丢失添加行编辑功能点击单元格可修改内容实现表格排序功能点击表头可按序号或数字升序 / 降序排列。