JS操作表格样式汇总

在HTML界面开发中，经常会遇见JS对TABLE表格的操作，下面针对几种经常性的操作进行汇总：

第一：JS动态增加表格行数据

在body中定义一个空的Table

 <div id="detail" class="sub-title4" align="left"><table id="tb_cxy">  </table></div>

JS控制代码：

content = "<tr onclick = \"selectRow(this);\" style=\"background:url(../../../img/yshd/cpbj1.png) no-repeat;background-size:900px  270px;height:270px;\">"+"<td style=\"width:900px;\"><p style=\"line-height:23px;padding-top:5px;color:#323232;font-size: 20px;font-family:monospace;\"><img src=\"../../../img/yshd/ychx.png\" height=\"20\">"+obj.stdproorgname+"-"+obj.stdproname+"</p>"+"<br><p style=\"line-height:20px;font-size: 16px;color:#369ae8;font-family:monospace;\">&nbsp;&nbsp;产品描述</p>"+"<br><p style=\"line-height:20px;font-size: 16px;color:#323232;font-family:monospace;font-weight:200;\">&nbsp;&nbsp;&nbsp;&nbsp;"+obj.stdprocon+"</p>"+"<br><p style=\"line-height:20px;font-size: 16px;color:#369ae8;font-family:monospace;\">&nbsp;&nbsp;申请条件</p>"+"<br><p style=\"line-height:20px;font-size: 16px;color:#323232;font-family:monospace;font-weight:200;\">&nbsp;&nbsp;&nbsp;&nbsp; "+obj.stdprodesp+"</p>"+"<br><label><input name=\"Fruit\" style=\"display:none\" id=\"cxy0\"  type=\"radio\" value=\""+obj.stdprono+"|"+obj.stdproorgname+"|"+obj.stdproname+"\" /> </label>"+"</td>"+/* "<td style=\"width:50px;\"><label><input name=\"Fruit\" style=\"display:none\" id=\"cxy0\"  type=\"radio\" value=\""+name1+"|"+obj.stdproorgname+"|"+obj.stdproname+"\" /> </label></td><br>&nbsp;&nbsp;"+ */"</tr>";
//document.getElementById("tb_cxy").innerHTML = content;$("#tb_cxy").append(content);

第二：JS获取鼠标所点击的行号、动态修改表格样式

function selectRow(tr){/**先把整个表格的选中单元格格式重置*/var num = document.getElementById("tb_cxy").getElementsByTagName("tr").length;//alert("表格总行数"+num);var tb = document.getElementById('tb_cxy');    // table 的 idvar rows = tb.rows;                           // 获取表格所有行for(var i = 0; i<rows.length; i++ ){/* for(var j = 0; j<rows[i].cells.length; j++ ){    // 遍历该行的 td//alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+rows[i].cells[j].innerHTML+"。");// 输出每个td的内容} *///rows[i].cells[1].style.cssText='width:50px;background-color:white;'rows[i].cells[0].style.cssText='width:900px;background:url(../../../img/yshd/cpbj1.png) no-repeat;background-size:900px  270px;height:270px;'}/**取消之前所有的选中*//* var $browsers = $("input[name=Fruit]"); $browsers.attr("checked",false);  *//**获取选中的行号*/var hnum = "";//alert("行号：" + (tr.rowIndex) );hnum = tr.rowIndex;$("input[name=Fruit]").each(function(){$(this).prop("checked",false);});//alert("当前选择的行号为："+hnum);//alert("Radio的ID值为0："+"cxy"+hnum);var r_id = "cxy"+hnum;//alert("Radio的ID值为1："+r_id);$("#"+r_id).prop("checked",true);if(curRow){curRow.bgColor = curColor;curColor = tr.bgColor;tr.bgColor = "white";}else{curColor = tr.bgColor;tr.bgColor = "white";}curRow = tr;curRowId = tr.id;//alert(tr.cells[0].innerText);/* tr.cells[1].style.cssText='width:50px;background: url(../../../img/yshd/bgxz.png) no-repeat;;background-position:right top;' */tr.cells[0].style.cssText='width:900px;background: url(../../../img/yshd/cpbj2.png) no-repeat ;background-size:900px  270px;height:270px;'/**将当前单元格的Radio按钮选中*//* $('#cxy0').attr('checked',true); */cpdm = $('input:radio:checked').val();//alert("产品代码："+cpdm);}

一个朋友新做的公众号，帮忙宣传一下，会不定时推送一些开发中碰到的问题的解决方法，以及会分享一些开发视频。资料等。请大家关注一下谢谢：

JS操作表格样式汇总相关推荐

js 操作表格-删除行
表格删除行表格删除行不适用父对象.removeChild()方法表格对象.deleteRow(行对象); 不论行对象是谁,都只会删除表格第一行**正确做法**表格对象.deleteRow(索引); 0 ...
Js操作表格-对表格单元格的添加删除修改
动态表格动态表格彻底研究对表格单元格的添加删除修改并对其进行移动以及拷贝等操作,是目前应用开发中常用的技术 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4 5 55 5 6 6 6 ...
js操作表格数据，DOM实现数据动态增删查改
项目文件下载基本功能 demo中涉及到的管理员密码为:962464.当然啦,那是假的,代码里面能找到,随意修改,模拟敏感操作而生 1.增加点击增加按钮,出现信息输入界面,输入完成后确认添加 2.删 ...
js对应css样式,JS操作CSS样式
一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...
js 操作元素属性、操作元素样式、display(none、block)
js操作元素属性 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
Chimm.Excel——使用 Java 基于 excel 模板操作表格的生成
1. 项目介绍 1.1 简介 Chimm.Excel 是什么? 该程序是一个用 Java 写的 Excel 生成工具,基于模板操作,简单,快捷,易上手. 1.2 特性数据组装方式大有不同和网上部分 ...
js如何操作表格（常用属性方法汇总）
js如何操作表格(常用属性方法汇总) 一.总结一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...
自动化办公之excel教程（3）：数据编辑操作，表格的美化操作，应用表格样式和单元格样式，制作报销汇总单
一.数据编辑操作 1.填充数据填充数据见上一节自动化办公之EXCEL教程(2):各种数据的输入,自动填充数据,表格操作小技巧 2.查找和替换数据第一步:开始选项卡里找到查找或者Ctil+F 第 ...
封装vue导出excel组件（扩展嵌入图片、操作工作表、表格样式等功能）
导出的excel中嵌入图片,同时还需要操作多个工作表与表格样式, 看了一些java的插件不太适合,因为我这边的需求是动态表单,字段不固定.后端的插件大部分依赖实体类注解,要不就是操作比较繁琐.又看了一 ...

JS操作表格样式汇总

第一：JS动态增加表格行数据

第二：JS获取鼠标所点击的行号、动态修改表格样式

JS操作表格样式汇总相关推荐

最新文章

热门文章