jquery 代码
$(funtion(){
//设置偶数行和奇数行
$("tbody>tr:odd").addClass("ou"); //为奇数行设置样式(添加样式类)
$("tbody>tr:even").addClass("dan"); // 为偶数行设置样式类
$("tbody>tr:has(:checked)").addClass("ed"); //判断行是否被选中(返回布尔类型)添加样式类 // has(:checked)") 返回一个bool值 true/false
// 搜索被选中 has(:checked)
$('tbody>tr').click(function(){
var hased = $(this).hasClass('ed');
if(hased)
{
$(this).removeClass("ed").find(":input").attr("checked",false);
}
else
{
$(this).addClass("ed").find(":input").attr("checked",true);
}
});
// 遍历指定触发函数
})
css 代码：
<style type="text/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;}
.dan {background:#FC0}
.ou {background:#FFF}
.ed {background:#669;color:#fff;}
</style>
HTML 代码
<body>
<table>
<thead>
<tr><th> </th><th>标题</th><th>时间</th><th>地点</th></tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏1</td><td>2011</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏2</td><td>2012</td><td>杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏3</td><td>2011</td><td>济南</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏4</td><td>2012</td><td>北京</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏5</td><td>2011</td><td>武汉</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100视屏6</td><td>2012</td><td>福州</td>
</tr>
</tbody>
</table>
</body>
分享到：
相关推荐
为了解决这个问题，"表格奇数偶数行条纹效果"被广泛采用，它通过交替颜色的方式使表格更加清晰易读。本教程将深入探讨如何使用jQuery 1.5版本实现这一效果，同时也会讲解如何在鼠标悬停和点击时改变行的背景色，增强...
例如，可以使用`nth-child`选择器来针对奇数行和偶数行设置不同的背景颜色： ```css tr:nth-child(even) { background-color: #f2f2f2; } tr:nth-child(odd) { background-color: #ffffff; } ``` 但这里提到的是...
例如，我们可以设置偶数行和奇数行不同的背景颜色，使得用户在浏览大量数据时能更容易区分不同行的信息。 接着，我们来探讨鼠标移过变色（hover效果）。在jQuery中，我们可以使用`.hover()`方法监听鼠标的进入和...
要实现这些功能，开发者通常会使用jQuery选择器来定位表格的行(`tr`)元素，然后使用CSS类或样式来改变它们的背景颜色。例如，可以使用`.even`和`.odd`类来分别标识偶数行和奇数行，然后在CSS中定义这两个类的背景...
4. **多选框选中变色**：在表格中，如果包含复选框（`<input type="checkbox">`），可以监听`change`事件来判断哪些行被选中，并改变这些行的样式。例如： ```javascript $("table tbody input[type='checkbox']")....
然后在JavaScript或jQuery中，我们可以遍历所有表格行，根据行的索引判断其是否为偶数行，如果是，就添加`.even`类；反之，添加`.odd`类。当鼠标悬停在某一行上时，我们可以通过修改这些类的CSS样式来改变背景颜色。...
6. **奇数行偶数行样式**：在HTML表格中，为奇数行和偶数行添加不同的样式是常见的做法，用于提高可读性。这通常通过CSS的`:nth-child(odd)`和`:nth-child(even)`伪类来实现，结合jQuery可以动态应用这些样式。 7. ...
标题和描述中提到的知识点主要集中在如何使用jQuery来实现表格的动态样式变化功能，包括隔行换色、移动换色以及点击换色。首先，我们将介绍这些效果的实现原理和技术细节。 ### 1. jQuery基础知识 jQuery是一个快速...
比如在文档中提到的`$("tr:odd")`和`$("tr:even")`就是jQuery提供的选择器，用于选中表格中奇数行和偶数行的元素。 3. **类的添加与删除** jQuery提供了`.addClass()`和`.removeClass()`方法来添加和删除元素的CSS...
以下是一个简单的示例，展示如何为表格的奇数行和偶数行设置不同的背景色： ```css /* 选择所有的表格行 */ table tr { /* 避免默认的表格边框样式 */ border-collapse: collapse; } /* 为所有奇数行（索引为1、...
在"jquery表格操作.pdf"中，我们探讨的是如何使用JQuery来增强表格的功能，包括交替显示行、拖动表格行、选择行以及排序等操作。下面将详细讲解这些功能的实现方式。 1. **交替显示行**： 这个功能是通过CSS类的...
jQuery实现表格颜色交替显示的方法涉及到了几个重要的知识点，主要集中在jQuery的选择器和方法的使用，以及CSS样式的应用。下面将详细阐述这些知识点： 首先，了解jQuery的基本概念是必要的。jQuery是一个快速、...
可以使用 `nth-child(odd)` 和 `nth-child(even)` 选择器来选中表格的奇数行和偶数行，并分别设置不同的背景颜色。例如： ```css tr:nth-child(odd) { background-color: #f2f2f2; } tr:nth-child(even) { ...
通过JQuery，我们可以轻松地为表格的奇数行或偶数行添加类，然后通过CSS定义这些类的样式。例如，使用`:odd`选择器可以选择奇数行，使用`:even`选择器可以选择偶数行。同时，我们还可以实现三色交替显示，例如通过`:...
在表格中，我们可以利用这一特性为偶数行和奇数行设置不同的背景颜色： ```css tr:nth-child(even) { background-color: #f2f2f2; /* 偶数行颜色 */ } tr:nth-child(odd) { background-color: #ffffff; /* 奇数...
通过上述知识点的详细介绍，我们可以了解到实现选中行变色效果所需掌握的jQuery操作、CSS样式设置和JavaScript事件处理等多方面技能。这些技能是前端开发中常用的基本技能，对于设计动态交互的Web页面非常关键。
如果一行被选中，则遍历该行中的所有复选框，设置它们的checked属性为true；如果一行没有被选中，则设置为false。 具体到文档中的代码实现，我们看到一个名为Kin_Tables的函数，它接受一系列参数来配置表格的行为。...
比如，我们可以为偶数行和奇数行设置不同的背景颜色。 ```css .normalEvenTD { background: #DFD8D8; /* 偶数行的背景颜色 */ } .normalOddTD { background: #FFFFFF; /* 奇数行的背景颜色 */ } ``` 在上面的CSS...
在本文的示例中，`parent`类用于突出显示可点击的父级行，`selected`类用于标识当前被选中并且展开的父级行，而`odd`类则用于交替背景色，改善表格的视觉效果。如下所示： ```css .parent { background: #FFF38F; ...
其中 `.even` 和 `.odd` 分别用于控制偶数行和奇数行的背景颜色，而 `.selected` 类则用于表示被选中的行。颜色的选择可以根据实际需求进行调整。 #### jQuery脚本应用样式 接下来，我们使用jQuery来自动为表格中...