【基于HTML5的网页设计及应用】——动态生成表格

Y小夜

已于 2024-05-22 22:29:28 修改

阅读量1.2k

点赞数 18

分类专栏：基于HTML5的网页设计及应用文章标签： html5 前端 html

于 2024-03-18 19:05:06 首次发布

本文链接：https://blog.csdn.net/shsjssnn/article/details/136307753

版权

基于HTML5的网页设计及应用专栏收录该内容

25 篇文章 2 订阅

订阅专栏

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客

🐳Java基础：Java基础_IT闫的博客-CSDN博客

🐋c语言：c语言_IT闫的博客-CSDN博客

🐟MySQL：数据结构_IT闫的博客-CSDN博客

🐠数据结构：数据结构_IT闫的博客-CSDN博客

💎C++：C++_IT闫的博客-CSDN博客

🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客

💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客

🥏python：python_IT闫的博客-CSDN博客

🐠离散数学：离散数学_IT闫的博客-CSDN博客

🥽Linux：Linux_Y小夜的博客-CSDN博客

🚝Rust：Rust_Y小夜的博客-CSDN博客

欢迎收看，希望对大家有用！

学习推荐：

        在当今这个飞速发展的信息时代，人工智能（AI）已经成为了一个不可或缺的技术力量，它正在逐步改变着我们的生活、工作乃至整个社会的运作方式。从智能语音助手到自动驾驶汽车，从精准医疗到智慧城市，人工智能的应用已经渗透到了我们生活的方方面面。因此，学习和掌握人工智能相关的知识和技能，对于任何希望在这个时代保持竞争力的个人来说，都已经变得至关重要。

        然而，人工智能是一个涉及数学、计算机科学、数据科学、机器学习、神经网络等多个领域的交叉学科，其学习曲线相对陡峭，对初学者来说可能会有一定的挑战性。幸运的是，随着互联网教育资源的丰富，现在有大量优秀的在线平台和网站提供了丰富的人工智能学习材料，包括视频教程、互动课程、实战项目等，这些资源无疑为学习者打开了一扇通往人工智能世界的大门。

        前些天发现了一个巨牛的人工智能学习网站：前言 – 人工智能教程通俗易懂，风趣幽默，忍不住分享一下给大家。

🎯功能简介

这段代码实现了一个简单的动态生成表格的功能。用户可以通过选择行数和列数，然后点击按钮生成对应行列的表格。

具体功能包括：
- 用户可以在下拉菜单中选择行数和列数。
- 点击"生成表格"按钮后，会调用`createTable()`函数动态生成对应行列的表格。
- 生成的表格会显示在页面中间的`<div>`元素中。

这样，用户就可以根据自己的需求动态生成不同行列数量的表格，方便灵活地展示数据。

🎯代码解析

<style type="text/css">
    h1,
    #form1 {
        width: 400px;
        margin: 20px auto;
    }

    table {
        border-collapse: collapse;
        border-color: #0099FF;
        width: 800px;
        /* background-color: #fff; */
    }

    td {
        /* border-color: #0099FF; */
        padding: 5px;
        border: 1px solid #0099FF;
    }
</style>
这部分代码定义了页面中的一些样式，包括标题和表单的宽度、居中显示，表格的边框样式和宽度，以及单元格的内边距和边框样式。
<body>
    <h1>软工2205班闫思昂的动态表格</h1>
    <form id="form1" name="form1" method="post" action="">
        
    </form>
    <div id="div1" align="center"></div>
    <script>
        // JavaScript部分
    </script>
</body>
这部分代码包含了页面的基本结构，包括一个标题、一个表单用于动态生成表格，以及一个空的<div>元素用于显示动态生成的表格。在最后是一个<script>标签，用于编写JavaScript代码。
<script>
    function createTable(){
        var hang=document.getElementById("lstRowNum").value;
        var lie=document.getElementById("lstColNum").value;
        var str="";
        str+="<table>"
        for(let i=1;i<=hang;i++){
            str+="<tr>";
            for(let j=1;j<=lie;j++){
                str+="<td>第"+i+"行第"+j+"列</td>";
            }
            str+="</tr>";
        }
        str+="</table>";
        document.getElementById("div1").innerHTML=str;
    }
</script>
这段JavaScript代码定义了一个名为createTable()的函数，该函数会根据用户在表单中选择的行数和列数动态生成对应行列的表格，并将生成的表格内容赋值给id为div1的<div>元素，从而在页面上展示动态生成的表格。

🎯核心代码

<body>
    <h1>软工2205班闫思昂的动态表格</h1>
    <form id="form1" name="form1" method="post" action="">
        <!-- 表单内容 -->
    </form>
    <div id="div1" align="center"></div>
    <script>
        // JavaScript部分
    </script>
</body>