table隔行变色

最新推荐文章于 2022-05-20 23:03:44 发布
最新推荐文章于 2022-05-20 23:03:44 发布
阅读量123 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/BinXu/p/5723058.html
版权

我们在操作div ul li的时候一般都是用document.getElementById和document.getElementsTagName选择器来选择元素，而当我们操作表格应用的时候有更简便的JS操作方式；

　　比如：tBodies,　　　　//选择表格身体tbody

　　　　　　tHead,　　　　//选择表格头部，一个表格中只能含有一个头部

　　　　　　tFoot,　　　　//选择表格尾部，一个表格中只能含有一个尾部

　　　　　　rows,　　　　//tr的每一行

　　　　　　cells。　　　　//每一列

<!DOCTYPE html>
<html>
<head>
<title>隔行变色</title>
</head>
<body>
<table border="1" width="500" id="tab1">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>王二</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>赵五</td>
<td>56</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var Otab = document.getElementById('tab1');
var Ocol ='';
for(var i=0;i<Otab.tBodies[0].rows.length;i++){
Otab.tBodies[0].rows[i].οnmοuseοver=function(){
Ocol= this.style.background;
this.style.background='red';
};
Otab.tBodies[0].rows[i].οnmοuseοut=function(){
this.style.background=Ocol;
};
if(i%2){
Otab.tBodies[0].rows[i].style.background='#CCC';
}else{
Otab.tBodies[0].rows[i].style.background='';
}
}

</script>
</body>
</html>

转载于:https://www.cnblogs.com/BinXu/p/5723058.html

b147180731
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
表格隔行换色
尝试坚持
04-21 1514
<br /> 网上很多关于表格隔行变色的方法，其实很多都是只能在IE内核浏览器下实现效，别的内核浏览器表现不出来。此文五种表格隔行变色的方法兼容所有现代浏览器(很久以前的古董浏览器未测试过)。 方法一：使用th与td标签控制隔行变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xml
AngularJS实现隔行换色
Liquor2的博客
10-25 642
需要引入jQuery包
JSJQ-隔行变色
anhu8321的博客
11-30 118
！！！- CSS 　　*{margin:0;padding:0;} 　　table{border-collapse: collapse;} 　　th,td{border:1px solid #ccc;padding:5px 25px; } ！！！ - HTML <table id="tab"> 　　<thead> 　　　　&l...
javascript小案例-----表单隔行变色
weixin_45904557的博客
05-20 279
效果如下: 代码思路: 用到鼠标经过onmouseover 鼠标离开onmouseout 鼠标经过tr行,当前的行变背景颜色,鼠标离开去掉当前的背景颜色 注意:第一行 th不需要变色, 只用获得有td的行,这里我们用thead和tbody进行区分 代码如下: html部分: <table border="1" cellpadding="10px" rules="all"> <thead> <tr> <th>.
HTML中设置table标签行列背景颜色
热门推荐
Small_Pang的博客
09-23 1万+
HTML中设置table标签行列背景颜色 在css选择器中进行设置： 使用tr:nth-child(5n)可以自己设置每隔多少行设置一种颜色。 也可以使用tr:odd{ }设置奇数行，tr:even{}设置偶数行 <style> tr:nth-child(5n){ background-color: #ff94e2; } ...
Table隔行变色的JavaScript代码
10-28
用js实现的table隔行变色，鼠标放上去有变色显示，需要的朋友可以参考下。
CSS+JS实现table隔行变色
05-24
对于table隔行变色，我们可以创建一个类，比如`.zebra-stripes`，然后将这个类添加到包含表格的`<table>`元素上。以下是一个简单的CSS示例： ```css .table.zebra-stripes tr:nth-child(odd) { background-color: ...
jquery选取商品隔行变色
09-22
在网页设计中，为了提升用户体验和视觉效果，我们经常需要对数据列表进行美化处理，比如隔行变色。"jQuery选取商品隔行变色"是一个常见的网页交互功能，主要用于电商网站的商品列表展示，使得用户在浏览长列表时能更...
CSS2+JS实现table隔行变色
05-07
在网页设计中，为了提升数据表格的可读性，我们经常需要实现表格的隔行变色效果。这个功能可以通过结合CSS2和JavaScript来轻松完成。本文将详细介绍如何使用这两种技术来实现这一效果，并提供一个简单易懂的示例供您...
js 控制table行的颜色
iteye_9657的博客
10-27 473
Table /** * 仿 Prototype 的 $ 方法 */ window.$ = function(id) { if(typeof id == 'string') { return document.getElementById(id); } return id; } /** * 色彩渐变 * ...
table隔行变色与table单元格根据条件更改字体颜色
weixin_30622107的博客
07-27 455
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格隔行变色</title> </head> <script> //表格隔行变色 function C...
javascript_操作表格
Twilight's Blog
03-14 288
表格的一些常用属性： caption(唯一) / tBodies / tFoot / tHead / rows / cells 一些常用方法： createTHead() / createCaption() / deleteTHead()获取caption table.caption.innerHTML 获取tBody中的列数 (tHead/tBodies) table.tBodies
[21]DOM操作表格及样式
weixin_34208185的博客
06-02 102
DOM 在操作生成 HTML 上，还是比较简明的。不过，由于浏览器总是存在兼容和陷阱 ，导致最终的操作就不是那么简单方便了。主要了解一下 DOM 操作表格和样式的一些知识。 一． 操作表格 <table>标签是 HTML 中结构最为复杂的一个，我们可以通过 DOM 来创建生成它，或者 HTML DOM 来操作它。(PS：HTML DOM 提供了更加方便快捷的方...
WinForm 设置dataGridView某行某列字体颜色
Scarlett的博客
07-20 3943
dataGridView.Rows[7].Cells[1].Style.ForeColor = Color.Red;
DOM表格 简单购物车、表格隔行变色、表格行颜色随鼠标移动变色
Birdlun的博客
07-06 428
目录 DOM访问表格元素 常用属性和方法 rows[index]返回表格指定的行为对应属性 cells[index]返回表格指定的列所对应的属性 表格的增删改查 表格添加删除常用方法 表格行添加删除方法 列：实现购物车 列：设置表格颜色并实现隔行变色 DOM访问表格元素 常用属性和方法 caption 返回表格的标题对象 rows 返回该表格里的所有表格行 tbo...
C1Grid 显示序号及更改某一行 或者某一个单元格的颜色示例
Transform
03-26 864
主要关键代码： CellStyle color = grid.Styles.Add(“rowredcolor”); color.ForeColor =Color.Red grid.SetCellStyle(0, 5, color);//单元格 grid.Rows[i].Style = color;//行 特别注意：HighLight的优先级别最高。会影响单元格的显示。 例子 pri...
JavaScript 表格中行改变颜色
Aaron's Weblogs
09-29 1558
function CancelTrSelected(tableId)...{    var i;    var obj = document.getElementById(arguments[0]);            for (i=1; i  obj.rows.length; i++)     ...{                obj.rows(i).style.backgroun
Dom操作高级应用
weixin_30725467的博客
07-02 80
table tBodies,tHead,tFoot,rows,cells 一个table有多个tbody oTab.tBodies[0].rows[i].style.background = "#ccc"; 示例：隔行换色 window.onload = function(){var oTab = document.getElementById("tab1");...
vxe-table隔行变色
最新发布
03-07
以下是设置vxe-table隔行变色的示例代码： ```html <vxe-table :data="tableData" stripe> <!-- 表格列配置 --> <vxe-table-column type="index" title="序号"></vxe-table-column> <vxe-table-column field=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值