【JS案例】——原生JS绘制表格及操作单元格

最新推荐文章于 2025-01-10 01:01:33 发布

Array[林]

最新推荐文章于 2025-01-10 01:01:33 发布

阅读量1.9k

点赞数 1

分类专栏：前端——JavaScript 前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_50785976/article/details/126969701

版权

本文通过一道操作表格的题目，介绍了如何使用原生JavaScript创建和操作表格。首先，封装函数根据用户首次输入的两个数字创建表格。接着，当用户再次输入数字时，若超过初始值则提示重新输入；否则，更新对应单元格的样式。文章展示了具体代码实现，并呈现了不同输入下的页面效果，帮助读者加深对表格操作的理解。

摘要由CSDN通过智能技术生成

今天收到了来自网友的一道题，如图所示：这是一道关于操作表格的题目。
PS：对这道题感兴趣的朋友，也可以自己去做做这道题，做完可以跟我的思路对比一下，看看有没有新的体会。

题目描述
在浏览完题目后，刚看着觉得很唬人，看完后其实整体的实现逻辑并不难，刚好小编对于表格的一些知识点有些遗忘了，刚好也想通过这道题回顾一下。
整体思路大致为：
1.根据第一次输入的两个数字创建表格，用一个函数封装创建表格的方法，参数为第一次输入的两个数字
2.在形成表格后，再次输入两个数字，如果这两个数字有其中一个大于第一次输入的两个数字，则提示输入不合理，重新输入
3.如果再次输入的数字合理，则从表格中找到对应的单元格，并赋予相应的样式

整体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制表格</title>
</head>
<style>
    table {
     
        border-collapse: collapse;
        position: absolute;
        top: 100px;
        left: 45%;
    }

    td {
     
        width: 4

最低0.47元/天解锁文章