Javascript——原生写table表格

news/2024/10/18 9:24:02/

写一个6行9列的表格

<div class="power-data"><table class="table1 table-all" cellpadding="0" cellspacing="0"><!--第一行--><tr><th class="thBack">表格</th><th class="thBack" v-for="(item,index) in branchCurrent" :key="index">{{item.name}}</th></tr><!--第二行--><tr align="center"><td class="thBack"></td><td v-for="(item,index) in branchCurrent" :key="index">{{item.value?item.value:'/'}}</td></tr><!--3--><tr align="center"><td class="thBack"></td><td v-for="(item,index) in branchVoltage" :key="index">{{item.value?item.value:'/'}}</td></tr><!--4--><tr><th class="thBack">表格</th><th class="thBack" v-for="(item,index) in afterBranchCurrent" :key="index">{{item.name}}</th></tr><!--第二行--><tr align="center"><td class="thBack"></td><td v-for="(item,index) in afterBranchCurrent" :key="index">{{item.value?item.value:'/'}}</td></tr><!--3--><tr align="center"><td class="thBack"></td><td v-for="(item,index) in afterBranchVoltage" :key="index">{{item.value?item.value:'/'}}</td></tr></table><table class="table2 table-all" cellpadding="0" cellspacing="0"><tr align="center"><td class="thBack tdLine">a</td><td class="tdLine">{{abLineVoltage?abLineVoltage:'/'}}</td><td class="thBack tdLine">b</td><td class="tdLine">{{aphaseVoltage?aphaseVoltage:'/'}}</td><td class="thBack tdLine">c</td><td class="tdLine">{{aphaseCurrent?aphaseCurrent:'/'}}</td></tr><tr align="center"><td class="thBack tdLine">d</td><td class="tdLine">{{bcLineVoltage?bcLineVoltage:'/'}}</td><td class="thBack tdLine">e</td><td class="tdLine">{{bphaseVoltage?bphaseVoltage:'/'}}</td><td class="thBack tdLine">f</td><td class="tdLine">{{bphaseCurrent?bphaseCurrent:'/'}}</td></tr><tr align="center"><td class="thBack tdLine">g</td><td class="tdLine">{{caLineVoltage?caLineVoltage:'/'}}</td><td class="thBack tdLine">h</td><td class="tdLine">{{cphaseVoltage?cphaseVoltage:'/'}}</td><td class="thBack tdLine">i</td><td class="tdLine">{{cphaseCurrent?cphaseCurrent:'/'}}</td></tr></table></div>
 .power-data {margin-left: 34px;.table-all {color: black;border: 1px solid #DEE6FC;border-radius: 2px 0px 0px 0px;.thBack {background: rgba(222, 230, 252, 0.4);border: 1px solid #DEE6FC;}.tdLine{line-height: 21px;width: 63px;height: 21px;}.tdBtn{line-height: 21px;width: 99px;height: 21px;}tr {text-align: center;font-size: 12px;}th,td {border: 1px solid #DEE6FC;border-radius: 2px 0px 0px 0px;padding: 4px;text-align: center;font-size: 12px;}}.table1 {margin-bottom: 10px;}.table3 {th,td {border-radius: 2px 0px 0px 0px;padding: 4px;text-align: center;font-size: 12px;}}}

效果如图所示
在这里插入图片描述


http://www.ppmy.cn/news/1158548.html

相关文章

ABAP 新增PO计划行时 新增行交货日期默认当前最大交期

ABAP 新增PO计划行时 新增行交货日期默认当前最大交期 DATA: ls_poitem TYPE mepoitem. DATA: ls_jhh TYPE meposchedule. DATA: ls_poitemc TYPE REF TO if_purchase_order_item_mm. DATA: is_persistent TYPE mmpur_bool. DATA: lt_eket TYPE TABLE OF eket. DATA: ls_e…

python3 解析json文件,python循环读取目录文件

python循环读取目录文件_mob649e815e9bc9的技术博客_51CTO博客 python3 解析json文件_mob649e816138f5的技术博客_51CTO博客 import osdef loop_dir_files(path):# 获取目录下的所有文件和文件夹files os.listdir(path)for file in files:# 拼接文件的完整路径file_path os…

【1++的Linux】之文件(二)

&#x1f44d;作者主页&#xff1a;进击的1 &#x1f929; 专栏链接&#xff1a;【1的Linux】 文章目录 一&#xff0c;文件描述符二&#xff0c;重定向三&#xff0c;理解Linux下一切皆文件 一&#xff0c;文件描述符 我们先来看一段代码&#xff1a; #include<unistd.h&g…

从代码入手理解卡尔曼滤波器的原理之预测步骤(二)

// 预测步骤void predict() {// 对于 1D,没有控制输入,因此预测就是使用上一个状态的值。// 但不确定度会增加预测噪声P += Q;}在卡尔曼滤波器中,预测步骤是估算系统在下一个时间点的状态,同时更新状态估算的不确定性(方差)。让我们结合上述的室温测量例子来理解这个 pre…

【精华系列】跟着Token学习数据挖掘-1

Hello&#xff0c;大家好&#xff01;这里是Token的博客&#xff0c;欢迎您的到来 今天整理的笔记时数据挖掘方向的基础入门&#xff0c;了解数据分析使用的一些基础的Python库&#xff0c;为后面的数据处理做好准备 01-数据分析工具介绍 准备&#xff1a;Python的安装、平台搭…

【MySQL】索引的增删查

上篇博客讲解了索引的底层结构 本篇介绍索引的使用 文章目录 一. 主键索引二. 唯一键索引三. 普通索引四. 全文索引五. 查询索引六. 删除索引结束语 一. 主键索引 MySQL默认会按照主键索引进行排序 关键字&#xff1a;primary key 即使建表时没有指明主键&#xff0c;MySQL也会…

SSL证书有效期越来越短是什么原因?

随着互联网的普及和数据安全意识的提高&#xff0c;SSL证书的使用变得日益普遍。SSL证书是一种用于加密数据传输并验证网站身份的安全协议。它们通过加密在用户浏览器和网站服务器之间传输的数据&#xff0c;从而确保数据的隐私和完整性。此外&#xff0c;SSL证书还通过数字签名…

C++入门篇(3)---引用

1.引用 你有没有被人起过外号?比如身边的朋友,喊他的时候不会叫他的全名,像我很好的朋友,我一般都喜欢叫他"阿威",而不会去称呼全名.我叫他"阿威",他还是他没有什么问题. 这里新登场的引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&am…