当前位置： 首页 > news >正文

设置table中的tbody

news 2025/12/16 8:44:45

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置table中的tbody</title>
    </head>
    <body>
        <script>
            // 这里有json数据，是java响应给浏览器的，浏览器通过eval函数转换成的数据
            var data = {
                "total" : 3,
                "emps" : [
                    {"empno" : 7369,"ename" : "SMITH","sal" : 800.0},
                    {"empno" : 7368,"ename" : "JACK","sal" : 1800.0},
                    {"empno" : 7367,"ename" : "TOOM","sal" : 2800.0},
                ]
            };
            // 现在希望把这些数据展示到table当中
            window.onload = function(){
                // 获取button对象
                var displayBtnElt = document.getElementById("displayBtn");
                // 对button对象绑定鼠标单击事件
                displayBtnElt.onclick = function(){
                    // 准备一个空字符串
                    var html = "";
                    // 获取data数据中emps属性值
                    var emps = data.emps;
                    // 遍历获取的emps
                    for(var i = 0; i < emps.length; i++){
                        // 每次循环获取一个员工信息
                        var emp = emps[i];
                        // 读取每个员工的各个属性并拼串
                        html += "<tr align='center'>";
                        html += "<td>" + emp.empno + "</td>";
                        html += "<td>" + emp.ename + "</td>";
                        html += "<td>" + emp.sal + "</td>";
                        html += "</tr>";
                    }
                    // 将拼接好的字符串放到tbody中
                    document.getElementById("tbody").innerHTML = html;
                    // 将获取到的信息条数（data.total）放到记录条数消息框中显示
                    document.getElementById("count").innerHTML = data.total;
                }
            }
        </script>
        <center>
            <input type="button" value="显示员工信息" id="displayBtn" />
            
            <!--以下是制作表格-->
            <h2>员工信息列表</h2>
            <hr /> 
            <table border="2px" width="50%">
                <thead>
                    <tr>
                        <th>员工编号</th>
                        <th>员工姓名</th>
                        <th>员工薪资</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
            共计<span id="count" >0</span>条记录
        </center>
    </body>
    
</html>

相关文章：

设置table中的tbody

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>设置table中的tbody</title> </head> <body> <script> // 这里有json数据&#xff0c;是jav…...

编程日记 2023/2/18 11:07:21

2023美赛A题完整数据！思路代码数据数学建模

选取内蒙古河套灌区&#xff08;典型干旱区&#xff09;2010-2020年气温&#xff0c;降雨&#xff0c;蒸散发和水汽压月数据 包括四种主要作物及其占比 内容截图如下&#xff1a; 链接为&#xff1a;https://www.jdmm.cc/file/2708703 同时还提供参考代码和参考文章的选项~…...

编程日记 2023/2/18 11:06:13

Node.js安装与配置

Node.js安装与配置 前言 本篇博文记录了Node.js安装与环境变量配置的详细步骤&#xff0c;旨在为将来再次配置Node.js时提供指导方法。 另外&#xff1a;Node.js版本请根据自身系统选择&#xff0c;安装位置、全局模块存放位置和环境变量应根据自身实际情况进行更改。 Node…...

编程日记 2023/2/18 11:05:05

k8s（存储）数据卷与数据持久卷

为什么需要数据卷&#xff1f; 容器中的文件在磁盘上是临时存放的&#xff0c;这给容器中运行比较重要的应用程序带来一些问题问题1&#xff1a;当容器升级或者崩溃时&#xff0c;kubelet会重建容器&#xff0c;容器内文件会丢失问题2&#xff1a;一个Pod中运行多个容器并需要共…...

编程日记 2023/2/18 11:03:55

php5.6.9安装sqlsrv扩展（windows）

报错:Marning: PHP Startup: Unable to load dynamic 1library D:lphpstudy_prolExtensionslphpl(phps.6.9ntslextphp_ pdo_sqlsry 56 nts′找不到指定的模块。in Unknown on line 0 整整搞了一天才终于解决 我用的是phpstudy_pro&#xff08;也就是小皮v8.1版本&#xff09;&…...

编程日记 2023/2/18 11:02:43

URL黑名单 扫描工具ua特征 GET(args)参数检查 cookie黑名单 POST参数检查参考代码

资源宝分享www.httple.net 文章目录URL黑名单扫描工具ua特征GET(args)参数检查cookie黑名单POST参数检查注&#xff1a;请先检查是否已设置URL白名单&#xff0c;若已设置URL白名单&#xff0c;URL黑名单设置将失效 多个URL配置需换行&#xff0c;一行只允许填写一个。可直接填…...

编程日记 2023/2/18 11:01:31

【软考系统架构设计师】2022下论文写作历年真题

【软考系统架构设计师】2022下论文写作历年真题 试题四 论湖仓一体架构及其应用&#xff08;75分&#xff09; 试题四 论湖仓一体架构及其应用 随着5G、大数据、人工智能、物联网等技术的不断成熟&#xff0c;各行各业的业务场景日益复杂&#xff0c;企业数据呈现出大规模、多…...

编程日记 2023/2/18 11:00:21

推荐3个好用的scrum敏捷项目管理工具

结合对工具的了解和使用心得&#xff0c;介绍在管理scrum中常见的一些工具基础的scrum工具&#xff1a;1、物理白板物理白板是实施scrum最简单直接的方式。之前我也说过&#xff0c;一些利弊。数据不能够沉淀等等。2、Excel表格表格的形式就是如果多人编辑时&#xff0c;不能实…...

编程日记 2023/2/18 10:59:14

每日学术速递2.17

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.LG 1.Decoupled Model Schedule for Deep Learning Training 标题&#xff1a;深度学习训练的解耦模型时间表 作者&#xff1a;Hongzheng Chen, Cody Hao Yu, Shuai Zheng, Zhen Zhang,…...

编程日记 2023/2/18 10:58:06

ElementUI`resetFields()`方法避坑

使用ElementUI中的resetFields()方法有哪些注意点 场景一 场景一&#xff1a;当编辑弹出框和新增弹出框共用时&#xff0c;编辑数据后关闭编辑弹出框时调用this.$refs.form.resetFields()无法清空弹出框 问题代码&#xff1a; // 点击新增按钮handleAdd() {this.dialogVi…...

编程日记 2023/2/18 10:56:55

如何保证数据库和缓存双写一致性？

前言 数据库和缓存&#xff08;比如&#xff1a;redis&#xff09;双写数据一致性问题&#xff0c;是一个跟开发语言无关的公共问题。尤其在高并发的场景下&#xff0c;这个问题变得更加严重。 我很负责的告诉大家&#xff0c;该问题无论在面试&#xff0c;还是工作中遇到的概率…...

编程日记 2023/2/18 10:55:47

Hinge Loss 和 Zero-One Loss

文章目录Hinge Loss 和 Zero-One LossHinge LossZero-One LossHinge Loss 和 Zero-One Loss 维基百科&#xff1a;https://en.wikipedia.org/wiki/Hinge_loss 图表说明&#xff1a; 纵轴表示固定 t1t1t1 的 Hinge loss&#xff08;蓝色&#xff09;和 Zero-One Loss&#xff…...

编程日记 2023/2/18 10:54:36

Linux下zabbix_proxy实施部署

简介 zabbix proxy 可以代替 zabbix server 收集性能和可用性数据,然后把数据汇报给 zabbix server,并且在一定程度上分担了zabbix server 的压力. zabbix-agent可以指向多个proxy或者server zabbix-proxy不能指向多个server zabbix proxy 使用场景: 1&#xff0c;监控远程区…...

编程日记 2023/2/18 10:53:19

Rust之错误处理(二)：带结果信息的可恢复错误

开发环境 Windows 10Rust 1.67.1VS Code 1.75.1项目工程 这里继续沿用上次工程rust-demo 带结果信息的可恢复错误 大多数错误并没有严重到需要程序完全停止的程度。有时&#xff0c;当一个函数失败时&#xff0c;它的原因是你可以很容易地解释和应对的。例如&#xff0c;如…...

编程日记 2023/2/18 10:52:09

[ vulhub漏洞复现篇 ] Drupal Core 8 PECL YAML 反序列化任意代码执行漏洞(CVE-2017-6920)

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

编程日记 2023/2/18 10:50:57

如何将数据库结构导入到word

在navicat执行查询语句 SELECT COLUMN_NAME 备注, COLUMN_COMMENT 名称, COLUMN_TYPE 数据类型, false as 是键 FROM INFORMATION_SCHEMA.COLUMNS where -- wx 为数据库名称&#xff0c;到时候只需要修改成你要导出表结构的数据库即可 table_schema yuncourt_ai AND -- articl…...

编程日记 2023/2/18 10:49:50

FreeRTOS内存管理 | FreeRTOS十五

目录 说明&#xff1a; 一、FreeRTOS内存管理 1.1、动态分配与用户分配内存空间 1.2、标准C库动态分配内存缺点 1.3、FreeRTOS的五种内存管理算法优缺点 1.4、heap_1内存管理算法 1.5、heap_2内存管理算法 1.6、heap_3内存管理算法 1.7、heap_4内存管理算法 1.8、hea…...

编程日记 2023/2/18 10:48:42

【数字电路】数字电路的学习核心

文章目录前言一、电子电路知识体系二、数电的学习目标三、数字电路分析例子四、数字电路设计例子总结前言 用数字信号完成对数字量进行算术运算和逻辑运算的电路称为数字电路&#xff0c;或数字系统。由于它具有逻辑运算和逻辑处理功能&#xff0c;所以又称数字逻辑电路。现代…...

编程日记 2023/2/18 10:46:29

day45【代码随想录】动态规划之完全平方数、单词拆分、打家劫舍、打家劫舍 II

文章目录前言一、完全平方数&#xff08;力扣279&#xff09;二、单词拆分&#xff08;力扣139&#xff09;三、打家劫舍&#xff08;力扣198&#xff09;四、打家劫舍 II前言 1、完全平方数 2、单词拆分 3、打家劫舍 4、打家劫舍 II 一、完全平方数&#xff08;力扣279&#…...

编程日记 2023/2/18 10:45:23

java程序，springboot程序 找不到主类，找不到符号解决思路

文章目录问题解决方案一.可以尝试clean掉maven依赖&#xff0c;然后重新启动二.右键工程&#xff0c;选择maven然后重新加载工程&#xff0c;接着再启动试试三.删掉工程中的services.iml文件&#xff0c;重新配置后接着再启动试试四. 终极方案清除idea缓存&#xff0c;重启idea…...

编程日记 2023/2/18 10:44:11

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/12/12 16:39:33

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/12/16 7:26:32

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/12/15 20:41:33

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/12/14 17:07:40

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/12/12 22:31:30

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2025/10/17 2:32:49

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2025/12/15 8:59:11