作者：linkstarter | 来源：互联网 | 2023-08-16 11:17
本文由编程笔记#小编为大家整理，主要介绍了08.01《jQuery》——隔行换色jQuery实现相关的知识，希望对你有一定的参考价值。
这是html代码和jQuery的触发代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" type="text/css" href="tableChangeColor_byself.css"/>
<script src="../jquery-3.2.1/jquery-3.2.1.js">script>
<script src="tableChangeColor_byself.js">script>
<script type="text/Javascript">
$(function(){
$("table").alterBgColor().find("th").css("color","red");
});
script>
head>
<body>
<table id="table1">
<thead>
<tr>
<th> th>
<th>姓名1th>
<th>性别th>
<th>暂住地th>
tr>
thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value="" />td>
<td>张三td>
<td>男td>
<td>新疆哈密td>
tr>
<tr>
<td><input type="checkbox" name="choice" value="" />td>
<td>李四td>
<td>女td>
<td>江苏南京td>
tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked=‘checked‘ />td>
<td>王五td>
<td>男td>
<td>湖南长沙td>
tr>
<tr>
<td><input type="checkbox" name="choice" value="" />td>
<td>赵六td>
<td>男td>
<td>浙江温州td>
tr>
<tr>
<td><input type="checkbox" name="choice" value="" />td>
<td>冯七td>
<td>男td>
<td>浙江嘉兴td>
tr>
<tr>
<td><input type="checkbox" name="choice" value="" />td>
<td>马八td>
<td>男td>
<td>浙江杭州td>
tr>
tbody>
table>
body>
html>
这是jQuery插件的代码：
;(function($) {
$.fn.extend({
//"隔行换色": function(options) {
"alterBgColor": function(options) {
//设置默认值
optiOns= $.extend({
odd: "odd",
/* 偶数行样式*/
even: "even",
/* 奇数行样式*/
selected: "selected" /* 选中行样式*/
}, options);
//$("选择器",上下文); //如果不传第二个参数 默认上下文是 document 从当前文档中 寻找
//this 在当前对象下 寻找 table
$("tbody>tr:odd", this).addClass(options.odd);
$("tbody>tr:even", this).addClass(options.even);
$(‘tbody>tr‘, this).click(function() {
//判断当前是否选中
var hasSelected = $(this).hasClass(options.selected);
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
//查找内部的checkbox,设置对应的属性。
.find(‘:checkbox‘).prop(‘checked‘, !hasSelected); //2.1.4 需改成prop方法
});
// 如果单选框默认情况下是选择的，则高色.
$(‘tbody>tr:has(:checked)‘, this).addClass(options.selected);
return this; //返回this，使方法可链。
}
});
})(jQuery);
这是其中的CSS样式代码：
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}
代码的结果为：
![前端库Bootstrap框架：「11]使用 span 创建行内元素](https://img6.php1.cn/3cdc5/9921/243/17a6062cb49e163c.png)
京公网安备 11010802041100号