原生js解决奇偶列问题-进阶版

最新推荐文章于 2022-08-19 21:51:03 发布
最新推荐文章于 2022-08-19 21:51:03 发布
阅读量187 收藏
点赞数
文章标签： 原生js IE8
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChyoD1811/article/details/103999914
版权

核心对象:  document , parentObj,  table ,td 

核心API:  document .getElementById     ,   parentObj.getElementsByTagName  , table.rows  , row.cells , td.align

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试表格奇偶列, IE8替代伪类选择器</title>
	<script type="text/javascript">
	window.onload = function(){
		
		var table_div = document.getElementById("aa1");
		var tables = table_div.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++) {
						// cells[k].style.border = '1px solid red';
						cells[k].style.width = '100px';
							if( (k & 1 ) === 0){//奇数
								cells[k].align = 'right';	
							}else{
								cells[k].align = 'left';	
							}
						}	
				}
		}
	}
</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/>
	<div id="aa1">
		<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>
	</div>
</body>
</html>
ChyoD1811
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js解决表格奇偶列显示
ChyoD1811的博客
01-15 355
本方案重点在于掌握table的 rows属性和 row的cells属性. 解决的问题: 例子: 奇偶列不同颜色显示 个人实际运用: 表格内部内容我想要让内容相对靠近, 奇数列靠右,偶数列靠左, 用以替换IE8不兼容的CSS3伪类选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-...
用js实现将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色
wangfei933的博客
06-08 2567
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <li>i+1</li> <li&g.
原生js实现奇偶行不同背景
Azy15031175682的博客
09-18 279
本人最近开始学习前端了，发现很多东西需要机记载呀。以table为例，实现奇偶行的不同颜色背景，话不多说上代码。 1、首先要先有一个div 2、然后就是js实现了 ...
JS 实现奇数偶数行颜色不同
夏沐的博客
01-13 7065
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
javascript原生选择器的一些基本方法
相信一切皆有可能
03-27 1010
在这里仅仅只是个人最近对javascript学习过程当中的一段记录，如有不正确的位置敬请指导： 首先对一些简单的选择方法进行封装 一。首先是一个简单的html文件没有任何的样式添加 原生js选择元素 pm am HelloWorld Hello World HelloWorldGoodDay 1111111111111111111111
【原生JS小实例】判断输入数字的奇偶性
xxxxxwxx的博客
08-19 529
【代码】【原生JS小实例】判断输入数字的奇偶性。
原生js练习题---第二课（上）
weixin_34336292的博客
03-05 125
0x1百度输入法 实现效果：See the Pen 2-01百度输入法 主要是切换的判断条件，一开始我还用点击次数的奇偶性来判断-_-||，其实直接检查菜单有没有显示即可。检查的时候有个小trick，初始状态菜单的style属性为空，因为我们接下来要点按钮显示，所以把这种情况和style.display为none的情况归为一类丢到els...
js控制表单奇偶行样式的简单方法
12-11
本篇将详细介绍如何使用JavaScript（JS）和jQuery来实现这一功能，特别是控制表单奇偶行的样式。 首先，如果你的项目已经引入了jQuery库，那么控制奇偶行的样式会非常简洁。jQuery提供了`:odd`和`:even`选择器，...
js奇偶变色
02-10
js原生代码实现表格的奇偶变色，可变色，可自定义样式
jQuery实现隔行变色的方法分析(对比原生JS)
10-21
本文将深入探讨如何使用jQuery实现隔行变色，并与原生JavaScript进行对比。 首先，我们来看原生JavaScript实现隔行变色的方法。通过`document.getElementsByTagName`方法，我们可以获取到页面上的所有表格元素...
des加密解密—JS实例
03-03
在JavaScript中，由于原生并不支持DES算法，我们通常需要依赖第三方库来实现。例如，`crypto-js`是一个流行的JavaScript加密库，提供了包括DES在内的多种加密算法。要使用这个库，你需要先通过npm或直接引入CDN链接...
js DES 加解密例子
03-06
在JavaScript中，由于原生不支持DES，通常需要借助第三方库，如crypto-js等。以下是一个简单的使用crypto-js实现DES加解密的例子： ```javascript // 引入crypto-js库 const CryptoJS = require("crypto-js"); // ...
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文).zip
08-05
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文)
PPO（Proximal Policy Optimization，近端策略优化）算法
08-05
在解答2024年华数杯全国大学生数学建模竞赛的C题“老外游中国”时，虽然PPO（Proximal Policy Optimization，近端策略优化）算法主要是应用于强化学习领域，特别是在解决连续动作空间的策略优化问题上，但在此数学建模竞赛中，它并不直接适用于数据处理、综合评价或路径规划等任务。不过，我们可以从数据处理和决策优化的角度，类比强化学习中的一些思想来构思解题策略。 然而，对于本题而言，我们可以更侧重于数据分析、综合评价模型（如层次分析法AHP、TOPSIS、模糊综合评价等）和路径规划算法（如Dijkstra、A*、遗传算法等）来解决问题。以下是对各个问题的进一步建模思路： 一、问题1建模思路 1.1 数据处理与分析 数据收集与清洗：首先，需要加载所有352个城市的CSV文件，对每个城市的100个景点信息进行数据清洗，去除无效或缺失的关键信息（如评分缺失的景点）。 最高分查找：遍历所有景点，找到最高评分（BS），并统计获评该评分的景点数量。 城市排名：统计每个城市获评BS的景点数量，并根据数量多少进行排序，列出前10个城市。 二、问题2建模思路 2.1 综合评价体系构建
中国城市统计年鉴（1985-2023）
08-05
《中国城市统计年鉴》是全面反映中国城市社会经济发展情况的资料性年刊。《中国城市统计年鉴—2023》收录了2022年全国各级城市社会经济发展等方面的主要统计数据。 本年鉴内容共分四个部分: 第一部分是全国城市行政区划,列有不同区域、不同级别的城市分布情况; 第二、三部分分别是地级以上城市统计资料和县级城市统计资料,具体包括人口、资源环境、经济发展、科技创新、人民生活、公共服务、等方面的数据; 第四部分是附录,为主要统计指标解释。 需要说明的是,从1997年开始,地级以上城市和县级城市分别采用不同的统计制度,有些指标在两类城市之间不具有可比性,故本年鉴将地级以上城市和县级城市统计资料分为独立的两部分。本年鉴所涉及的全国或全部城市统计资料,均未包括香港特别行政区、澳门特别行政区和台湾省。
振中TP900 驱动工具2.2
08-05
振中TP900 驱动工具2.2
大学信息安全试题精选12
08-05
大学信息安全试题精选 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
mutiple_pie (8).zip
最新发布
08-05
mutiple_pie (8).zip
原生js根据class修改z-index
05-10
```javascript // 获取所有带有指定 class 的元素 const elements = document.querySelectorAll('.some-class'); // 循环遍历每个元素，并修改其 z-index elements.forEach((element) => { element.style.zIndex =...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值