原生js解决表格奇偶列显示

本方案重点在于掌握table的 rows属性和 row的cells属性.

解决的问题:

例子: 奇偶列不同颜色显示

个人实际运用: 表格内部内容我想要让内容相对靠近, 奇数列靠右,偶数列靠左, 用以替换IE8不兼容的CSS3伪类选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>测试表格奇偶列, IE8替代伪类选择器</title><script type="text/javascript">window.onload = function(){var tables = document.getElementsByTagName("table");for (var i = 0; i < tables.length; i++) {var rows = tables[i].rows;for (var j = 0; j < rows.length; j++) {var cells = rows[j].cells;for (var k = 0; k < cells.length; k++) {if( (k & 1 ) === 0){//奇数cells[k].style.background = 'red';    }else{cells[k].style.background = 'black';   }}  }}}
</script>
</head>
<body><table><tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td></tr><tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td></tr><tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr><tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td></tr></table><br/><br/><br/><br/><table><tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td></tr><tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td></tr><tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr><tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td></tr></table>
</body></html>

原生js解决表格奇偶列显示相关推荐

js php排序表格,原生JS实现表格排序
最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点:call方法使用 sort方法深 ...
（转）用JS实现表格中隔行显示不同颜色
用JS实现表格中隔行显示不同颜色第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? ...
html 让表格在右侧显示不出来,css中怎么解决表格边框不显示的问题？
css中怎么解决表格边框不显示的问题? html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框. css中也可以设置 ...
7.2DIY可视化后台表格自定义列显示类型
后台表格自定义列显示类型本教程均在第一节中项目启动下操作后台表格自定义列显示类型前言一.图片格式内容显示: 二. 效果展示: http://localhost:9999/#/hdp 三:自定义 ...
php前端计算合计,js统计表格指定列的合计
js统计表格指定列的合计龙行 PHP 2018-10-18 1894 0评论用户统计列表编号用户名存款下注中奖 {volist name="data" ...
html 语言表格边框显示,css中怎么解决表格边框不显示的问题？
css中怎么解决表格边框不显示的问题? html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框. css中也可以设置 ...
《JS控制表格奇偶数行背景色变换》
引言: 当我们利用html标记标签语言制作出一张普通的信息表格时,为了摆脱单调,提高用户体验,我们可以为其添加各种动态效果,以满足用户在操作表格时所带来的效果乐趣. 内容概括:当鼠标移动到表格上的相关 ...
最新原生js轮播图案列
最新原生js轮播图案列,很简单几个步骤 1.导入html结构,结构大家都会写哦,我就展示一下,图片有些尺寸没有对上,变形很正常的,可以给几个不同颜色的盒子用来实验都可以的. html代码 <di ...
element ui 表格动态列显示空白bug 修复
在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是 ...

原生js解决表格奇偶列显示

原生js解决表格奇偶列显示相关推荐

最新文章

热门文章