使用jQuery完成表格隔行换色

绝地灬酷狼 2022-04-21 22:40 264阅读 0赞

## addClass(class):为每个匹配的元素添加指定的类名。 ##

HTML 代码:

<p>Hello</p>

jQuery 代码:

$("p").addClass("selected");

结果:

[ <p class="selected">Hello</p> ]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" href="../css/style.css" />
    		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    		<script>
    			$(function(){
    //				$("tbody tr:even").css("background-color","gold");
    //				$("tbody tr:odd").css("background-color","pink");
    				$("tbody tr:even").addClass("even");
    				$("tbody tr:even").removeClass("even");
    				$("tbody tr:odd").addClass("odd");
    			});
    		</script>
    	</head>
    	<body>
    		<table border="1px" width="200px" height="200px" style="margin: auto;">
    			<thead>
    				<tr>
    					<th>id</th>
    					<th>name</th>
    					<th>age</th>
    					
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td>1</td>
    					<td>tom</td>
    					<td>21</td>
    					
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>jack</td>
    					<td>22</td>
    					
    				</tr>
    				<tr>
    					<td>3</td>
    					<td>lucy</td>
    					<td>23</td>
    					
    				</tr>
    				<tr>
    					<td>4</td>
    					<td>lucy2</td>
    					<td>24</td>
    					
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，264人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标事件之表格隔行换色

鼠标经过离开变色案例：效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

末蓝、/ 2022年11月22日 10:13/ 0 赞/ 242 阅读

相关用jstl实现表格的隔行换色

jstl的隔行换色在tr标签的里边加上代码： <tr ${ vs.count%2==1? "style='background-color:red'" : "

淩亂°似流年/ 2022年06月08日 08:12/ 0 赞/ 367 阅读

相关 js之表格隔行换色

步骤分析：第一步：确定事件(onload)并为其绑定一个函数第二步：书写函数(获取表格) 第三步：获取tbody里面的行数第四步：对tbody里面的行进行

╰+攻爆jí腚メ/ 2022年05月31日 08:51/ 0 赞/ 268 阅读

相关隔行换色并且鼠标指向行变色的表格

一应用对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色并且鼠标指向行变色功能。二代码 <s

小咪咪/ 2022年05月12日 00:36/ 0 赞/ 273 阅读

相关使用jQuery完成表格隔行换色

addClass(class):为每个匹配的元素添加指定的类名。 HTML 代码: <p>Hello</p> jQuery 代码: $("p").a

绝地灬酷狼/ 2022年04月21日 22:40/ 0 赞/ 265 阅读

相关 JavaScript jQuery隔行换色

<script type="text/javascript"> $(function() { //隔行变色 $("changeColor tr:

梦里梦外;/ 2022年04月03日 05:23/ 0 赞/ 311 阅读

相关使用jQuery完成表格的隔行换色（对比JavaScript）

1、案例描述开发中，需要表格陈列数据，数据过多不易查看，通过隔行换色进行表示。 2、jQuery代码实现 2.1、理解class操作：

女爷i/ 2022年03月25日 08:48/ 0 赞/ 241 阅读

相关 js隔行换色

1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

r囧r小猫/ 2022年03月19日 02:38/ 0 赞/ 304 阅读

相关 jQuery中实现隔行换色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ

「爱情、让人受尽委屈。」/ 2021年09月18日 22:48/ 0 赞/ 391 阅读

相关利用js实现表格隔行换色效果

利用js实现表格隔行换色效果首先我们来看一下实现的效果，如下图所示：思路：确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:...

小灰灰/ 2020年06月03日 12:45/ 0 赞/ 742 阅读