JS中设置表格奇偶行不同颜色

最新推荐文章于 2024-01-03 15:24:54 发布
最新推荐文章于 2024-01-03 15:24:54 发布
阅读量3.3k 收藏 2
点赞数
分类专栏： JS 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxfly957/article/details/76672416
版权
$("#mytable tbody tr:even").css('background', "#AEEEEE");
  $("#mytable tbody tr:odd").css('background', "#bbbbff");

值得注意的是如果项目中<tbody>里的内容如果是在js中动态拼接完成的，那么表格奇偶行颜色应该在<tbody>拼接完成之后设置。
当时年少春衫薄丶
关注
专栏目录
原生js解决表格奇偶列显示
ChyoD1811的博客
01-15 361
本方案重点在于掌握table的 rows属性和 row的cells属性. 解决的问题: 例子: 奇偶列不同颜色显示 个人实际运用: 表格内部内容我想要让内容相对靠近, 奇数列靠右,偶数列靠左, 用以替换IE8不兼容的CSS3伪类选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-...
表格奇偶行变色
zwj1030711290的CSDN
12-16 1492
表格的行间隔变色 有如下种方式 方式一:使用纯css table.dictionaryList tr:nth-child(2n+1){ background-color:#c0e0f7;}table.dictionaryList tr:nth-child(2n+0){ background-color:#defcfe;} 说明 :n从零开始:0,1,2,3....
JS 实现奇数偶数行颜色不同
夏沐的博客
01-13 7087
HTML代码部分： input type="button" value="隔行变色" id="btn"/&gt; &lt;ul id="uu"&gt; &lt;li&gt;红旗&lt;/li&gt; &lt;li&gt;五菱宏光&lt;/li&gt; &lt;li&gt;奔驰&lt;/li&gt
js设置表格奇偶行的不同颜色，实现斑马效果
HuangsTing的博客
10-30 2757
让表格里的行更具有可读性的常用技巧是交替改变它们的样式背景，从而形成斑马线效果，使相邻的两行泾渭分明。通过分别设置奇数行和偶数行样式的办法可实现这种效果。如果浏览器支持CSS3，那么只需要如下两行样式： tr:nth-child(odd){background-color:#ffc;} tr:nth-child(even){background-color:#fff;} 另一种方法，可以编写一个...
html 偶数项 替换,JS通过奇数项和偶数项实现两种背景颜色的表格实现代码
weixin_39691748的博客
07-08 640
原理其实很简单：利用getElementsByTagName得到所有的元素，然后分别为奇数项和偶数项的元素添加背景颜色。核心代码：function color() {//把表头设为紫色var th = document.getElementById("th");th.style.background = "violet"//1.得到所有元素var trs = document.getElemen...
表格奇偶行设置不同颜色的核心JS代码
10-26
在文档中的示例里，给奇数行设置的背景颜色为"#e6e6fa"，给偶数行设置的背景颜色为"#fff0fa"。这两个颜色值是十六进制的颜色代码，你可以根据实际需要调整颜色值来改变行的显示效果。 需要注意的是，在文档中提供的...
如何用jquery控制表格奇偶行及活动行颜色
10-26
在这个主题中，我们将探讨如何使用jQuery来控制表格中奇偶行以及活动行的颜色。jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，从而让Web开发更加方便快捷。 1...
jquery css 设置table的奇偶行背景色示例
10-25
在网页设计与开发中，为了提高表格数据的可读性，我们经常需要对表格中的奇数行和偶数行设置不同的背景颜色。这种做法不仅可以使表格看起来更加美观，还能帮助用户更轻松地识别不同行的数据。本文将详细介绍如何使用...
js改变表格颜色
//逆风走，不滞留//
01-10 2384
不错的一个效果，注释很详细： //点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) {      var sTable = document.getElementById("ServiceListTable")      for(var i=1;i     {          if (sTable.rows[
vue3更改DataV奇数行、偶数行背景颜色
hotwateron的博客
01-03 582
vue3更改DataV奇数行、偶数行背景颜色
Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色，一看就明白
编程界明世隐的博客
12-10 4535
最主要就是用到属性的绑定 :class <!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> <style> * { margin: 0px; padding: 0px; } body { .
vue 实现奇偶行背景交换
顽石⚡
10-25 1430
css .bc { background-color: white; } .bc2 { background-color: gray; } template &lt;li class="m-title2" :class="{bc2:index%2===0,bc:index%2===1}" v-for="(item, index) in mobiles" :key="index"&gt; ...
《JS控制表格奇偶数行背景色变换》
qq_35119220的博客
02-24 5713
引言： 当我们利用html标记表签语言制作出一张普通的信息表格时，为了摆脱单调，提高用户体验，我们可以为其添加各种动态效果，以满足用户在操作表格时所带来的效果乐趣。 内容概括：当鼠标移动到表格上的相关单元行时，其相关行的背景色改变【颜色自定义】，并且单元行背景色的改变会根据表格行的奇偶性来改变，从而产生背景色变换的效果。 内容截图：
js动态生成表格，奇偶行换色，增加删除表格
张浩天的专栏
04-23 1301
function showTable(){ var otable = document.createElement("table"); otable.id="mytable"; otable.border="1"; otbody = document.createElement("tbody"); var otr = document.createElement("tr"); var
使用jquery使特定表格变色
Min的博客
08-01 1758
之前我们使用DOM操作来使特定的表格变色，但是通过jquery两行代码就可以达到我们想要的效果。$("#table tbody tr:even").css("backgroundColor","#7FFFD4"); //获取id为table的元素，然后寻找tbody标签，在寻找索引值是偶数的tr元素，改变背景 $("#table tbody tr:odd").css("backgr
Element-ui Table
yuzheh521的博客
11-30 123
<style> [v-cloak]{ display: none; } /* 奇数行 */ #con1 li:nth-child(odd){ background: #f9f9f9; } /* 偶数行 */ #con1 li:nth-child(even){ background: #edf0f3; } .el-table .warning-row {
JS实现奇偶行变色
z-ying-jian的博客
01-20 1847
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="keywords" content=""&gt; &lt;meta name="description&q
jquery怎么设置表格奇偶行不同的颜色？
qq_45991812的博客
06-22 1527
在jQuery中使用“$("tr:odd").css("background-color","颜色")”与“$("#tr:even").css("background-color","颜色")”即可设置表格奇偶行颜色不同。
使用双重for循环动态地创建一个表格，并且使奇偶行的背景颜色交替变化。
最新发布
09-11
使用双重for循环来动态创建一个表格，并实现奇偶行背景颜色交替变化，通常是在网页开发中完成的，尤其是在JavaScript结合HTML和CSS时。以下是基本的实现步骤： 1. 使用HTML定义表格的基本结构。 2. 利用JavaScript，特别是双重for循环，动态地往表格中添加行和单元格。 3. 在添加每一行时，通过判断行索引的奇偶性来设置不同的背景颜色。 下面是一个简单的示例代码： HTML部分: ```html <!DOCTYPE html> <html> <head> <title>动态创建的表格</title> <style> .even-row { background-color: #f2f2f2; } .odd-row { background-color: #ffffff; } </style> </head> <body> <div id="table-container"></div> <script src="script.js"></script> </body> </html> ``` JavaScript部分 (script.js): ```javascript function createTable(rows, cols) { var tableContainer = document.getElementById('table-container'); var table = document.createElement('table'); table.setAttribute('border', '1'); for (var r = 0; r < rows; r++) { var tr = document.createElement('tr'); for (var c = 0; c < cols; c++) { var td = document.createElement('td'); td.textContent = '单元格'; tr.appendChild(td); } // 根据行的奇偶性设置不同的背景颜色 if (r % 2 === 0) { tr.className = 'even-row'; } else { tr.className = 'odd-row'; } table.appendChild(tr); } tableContainer.appendChild(table); } // 创建一个5行5列的表格 createTable(5, 5); ``` 在这个示例中，我们定义了一个`createTable`函数，它接受行数和列数作为参数。然后，我们使用双重for循环来添加行和单元格，并根据行的索引是奇数还是偶数，分别给行元素添加不同的类名（`.even-row`或`.odd-row`）。CSS样式定义了这两个类的不同背景颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值