js自动生成html报表,JavaScript实现动态生成表格

article/2025/9/27 15:19:39

本文实例为大家分享了JavaScript实现动态生成表格的具体代码,供大家参考,具体内容如下

功能描述

在输入框中输入行和列,点击按钮,生成拥有对应行和列的表格。如下图所示:

41a29db39c0c209f56d2811e558e0f3f.png

分析

HTML界面设计

行:

列:

js代码部分:

先得到输入的行和列的值

var row = document.getElementById("row").value;

var col = document.getElementById("col").value;

生成表格,新建一个字符串str,把表格的html代码追加进去,先循环行,再循环列,生成一个一个的单元格。

var str += '

for(var i = 0; i < row; i++) {

str += '

';

for(var j = 0; j < col; j++) {

str += '

';

}

str += '

';

}

str += '

';

获取上面的盛放表格的盒子对象,并向里面添加内容。

var divobj = document.getElementById("table");

divobj.innerHTML = str;

代码

行:

列:

function add() {

var row = document.getElementById("row").value;

var col = document.getElementById("col").value;

//alert(row + "*" + col);

var str = "";

//alert(str);

str += '

for(var i = 0; i < row; i++) {

str += '

';

for(var j = 0; j < col; j++) {

str += '

';

}

str += '

';

}

str += '

';

var divobj = document.getElementById("table");

divobj.innerHTML = str;

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


http://chatgpt.dhexx.cn/article/m4uaYXIx.shtml

相关文章

JavaScript 动态生成表格 及删除表格

创建 表格表头 <body> <table> <thead> <tr> <td>序号</td> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>地址</td> <td>删除</td> </tr> </thead> <t…

js动态生成表格实例

效果图 代码 <!DOCTYPE html> <html> <body> <div><h1>动态生成表格</h1><div id"table1">行&#xff1a;<input type"text" id"h"/>列&#xff1a;<input type"text" id"…

在html中生成动态表格数据,JavaScript实现网页动态生成表格

JavaScript(JS)网页–动态生成表格,供大家参考,具体内容如下 在网页中,动态生成列表的内容,将数组中的object加入到列表中(没学到数据库)。在HTML中创建thead,然后通过JavaScipt动态生成tbody。并且在每行最后申城一个单元格,加入删除操作,点击删除可以删除此行。动态生…

使用JS动态生成表格

代码如下&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8" /><title></title><script>var bgColor;var list [{ id: 1, country: 中国, capital: 北京,},{ id: 2, country: 美国, capital: 纽约,},{ id…

html动态生成表格源码,JavaScript动态生成表格的示例

要求&#xff1a; HTML标签只写一行表头 通过JS来写动态的表格(有多少组数据&#xff0c;就自动创建多少行表格) 为学习和演示&#xff0c;采用固定的数据&#xff0c;不涉及调用后台数据 代码实现&#xff1a; HTML内容&#xff1a; 姓名科目成绩操作 CSS内容&#xff1a; tab…

利用javascript动态生成表格及注释

记录学习第一天 &#xff1a;关于javascript如何动态的生成表格 css样式想节省时间就没写,所以只有基本样式。 html部分&#xff1a; 创建一个表格&#xff08;table&#xff09;的头部&#xff08;thead&#xff09;和数据&#xff08;tbody&#xff09;标签。 <table b…

JavaScript网页——动态生成表格

1.创建学生数据 分析&#xff1a;因为里面的学生数据都是动态的&#xff0c;我们需要js动态生成。这里我们模拟数据&#xff0c;自己定义好数据。数据我们采取对象形式存储。 var students [{name:吕小布,subject:JavaScript,score:100,},{name:张益达,subject:JavaScript,…

JavaScript 动态生成表格 案例

功能描述 在输入框中输入行和列&#xff0c;点击按钮&#xff0c;生成拥有对应行和列的表格。如下图所示&#xff1a; 分析 HTML界面设计 <body>行&#xff1a;<input type"text" id"row" /> 列&#xff1a; <input type"text"…

javascript动态生成表格 -- 案例

js动态生成表格 Draven 效果预览html部分css部分js部分 表格内容使用js生成 效果预览 html部分 <table border"1px" cellspacing"0" cellpadding"10"><thead><tr style"background-color: #999999; height: 60px">…

JavaScript中动态生成表格

1. 以下这个案例比较典型&#xff1a; 涉及到dom节点的操作&#xff0c;以及数组和对象的遍历方法 题目要求&#xff1a; 使用数组把学生数据模拟出来。动态创建行、单元格。为单元格填充数据。提供“删除”链接&#xff0c;可删除所在的行。 效果如下&#xff1a; html代码…

js 动态生成表格案例

<1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th), 下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 <body> <table><thead><tr><th>姓名</th><th>科目</th><…

原生JS实现动态表格的生成

今天完成动态表格的生成&#xff0c;巩固知识&#xff0c;梳理一下思路。 首先我们创建表格和他的头部&#xff0c;后面根据数据动态生成插入进来。结构如下 <table cellspacing"1px" bgcolor"black"> <thead><tr><td>姓名</…

js动态表格创建

js动态表格创建 1、一个table表格&#xff0c;表格分为两个部分&#xff0c;上面是thead表头&#xff0c;表头里面仅一行&#xff0c;有3列&#xff08;th), 下面是tbody表格内容&#xff0c;要求tbody中的每一行都是用js动态创建的2、通过点击“生成”按钮&#xff0c;在div标…

JavaScript动态生成表格

源代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible" content…

关闭nginx的日志记录

error.log&#xff1a;存放错误日志 access.log&#xff1a;存放用户访问记录日志

Linux系统关闭nginx,linux下nginx启动、重启、关闭

方式一:传统方法 一、启动 cd usr/local/nginx/sbin ./nginx 二、重启 更改配置重启nginx kill -HUP 主进程号或进程号文件路径 或者使用 cd /usr/local/nginx/sbin ./nginx -s reload 判断配置文件是否正确 nginx -t -c /usr/local/nginx/conf/nginx.conf 或者 cd /usr/local…

Linux-Centos设置Redis自启及关闭Nginx自启

前提&#xff1a; 这次的操作是在华为云上进行操作。 全程的操作非常快&#xff0c;只是我第一次进行操作比较缓慢&#xff0c;且进行了一系列的查看相应的文件。 设置守护进程 这一步我也不确定&#xff0c;毕竟我还是熟悉Windows操作系统&#xff0c;这个设置守护进程的是…

windows快速关闭nginx

windows快速关闭nginx 提出问题 使用windows开发学习,使用本地得nginx测试,发现关闭nginx比较麻烦,有时候还关不掉 使用命令行快速关闭nginx 以管理员得身份打开dos命令窗口 如图:以win10系统为例 直接输入命令 taskkill /f /t /im nginx.exe总结 x.exe ## 总结使用这种…

windows命令行停止nginx运行

检查nginx是否启动 tasklist /fi "imagename eq nginx.exe" 停掉nginx&#xff0c;可通过任务管理器杀死进程&#xff0c;也可通过命令行 taskkill /f /t /im nginx.exe ####该命令行会关闭nginx的所有进程【但有时候无法关掉相关子进程&#xff08;同时配置多个…

CentOS 7.6 安装Nginx及关闭nginx默认配置

我使用的服务器是阿里云的服务器。 配置好后&#xff0c;直接用IP访问网站没有问题&#xff0c;但是使用域名解析访问一直是welcome to nginx&#xff01;页面&#xff0c;是因为其使用了默认配置&#xff0c;将下文所给配置中第19行注释掉即可&#xff01; 首先更新一下yum y…