分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

JS动态生成表格

发布时间:2023-09-06 01:46责任编辑:白小东关键词:暂无标签

  最近实现了使用原生Javascript来生成动态表格的一个功能,主要功能是:输入表格的行数和列数,来创建指定的表格。

  源码:https://github.com/JinganGuo/JavascriptDemos;

  效果图如下:

 

  编码的过程中主要要注意对用户的输入进行一个检查,对非数字、负数、小数、以及大于1000的数字进行检查:

 1 // 检查数字 2 function checkNum(num) { 3 ????if (!num || isNaN(num)) { 4 ????????alert("请输入一个数字"); 5 ????} else if (num <= 0) { 6 ????????alert("请输入一个大于0的数字"); 7 ????} else if (String(num).indexOf(".") > -1) { 8 ????????alert("请输入一个整数"); 9 ????} else if(num > 100){10 ????????alert("请不要输入超过1000的数字!");11 ????} ?else {12 ????????return true;13 ????}14 }

   生成表格使用了table对象的方法:insertRow() 和 insertCell():

 1 // 生成表格 2 function createTable(row, column) { 3 ????var table = document.createElement("table"); 4 ????// 添加行 5 ????for (var i = 0; i < row; i++) { 6 ????????var trNode = table.insertRow(); 7 ????????// 添加列 8 ????????for (var j = 0; j < column; j++) { 9 ????????????var tdNode = trNode.insertCell();10 ????????????tdNode.innerHTML = (i + 1) + "行" + (j + 1) + "列";11 ????????}12 ????}13 ????return table;14 }

JS动态生成表格

原文地址:https://www.cnblogs.com/gja1026/p/8595244.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved