根据所输入的 “行“ 和 “列“ 生成表格

iAsmoday

于 2022-02-08 20:48:02 发布

阅读量1.2k

点赞数 1

分类专栏： HTML案例文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/xjh15053412243/article/details/122831007

版权

本文介绍如何通过JavaScript根据用户输入的行数和列数动态生成HTML表格，重点讲解相关DOM操作和JavaScript语法。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格生成案例</title>
    <style>
        #div1{
            width: 500px;
            margin: auto;
        }
        table, tr, td {
            border: 1px solid black;
        }
        table {
            border-collapse: collapse;
            margin-top: 24px;
        }
        td {
            height: 24px;
            width: 120px;
        }
    </style>
    <script>
        function addTb() {
            //获取行和列的值
            var rowNumStr = document.getElementById("row").value;
            var colNumStr = document.getElementById("col").value;

            var rowNum = parseInt(rowNumStr)
            var colNum = parseInt(colNumStr)