jquery 双色表格实现代码

http://www.jb51.net/article/21027.htm
不多说了，直接给代码
代码


代码如下:

<html>
<head>
<title>双色表格</title>
<style type="text/css">
<!--
table {
border:solid 1px black;
text-align:center;
border-spacing:0px;
}
th,td {
border:solid 1px black;
width:100px;
}
-->
</style>
<script src="lib/jquery.js" type="text/javascript"></script>
<script type="text/javascript" >
$().ready(function() {
$('tr:has(th)').css('background','violet'); //表格标题
$('tr:even:gt(0)').css('background','yellow'); //偶数行,且行数大于0(即标题)
$('tr:odd').css('background','olive'); //奇数行
});
</script>
</head>
<body>
<center>
<table>
<tr id="th">
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>张三</td>
<td>数学</td>
<td>87</td>
</tr>
<tr>
<td>李四</td>
<td>数学</td>
<td>68</td>
</tr>
<tr>
<td>王五</td>
<td>英语</td>
<td>76</td>
</tr>
</table>
</center>
</body>
</html>

赞 (0)

相关推荐

  • 使用jQuery5分钟快速搞定双色表格的简单实例

    使用jQuery5分钟快速搞定双色表格的简单实例

    先看看这个使用jQuery做的双色表格的效果: 这个双色表格看上去应该觉得挺专业的,不过它用jQuery实现的确很简单. 第一步:写好css. <style type="text/css"> th { /*表头样式*/ background:#0066FF; color:#FFFFFF; line-height:20px; height:30px; } td { padding:6px 11px; border-bottom:1px solid #95bce2; verti

  • jquery 双色表格实现代码

    http://www.jb51.net/article/21027.htm不多说了,直接给代码 代码 复制代码 代码如下: <html> <head> <title>双色表格</title> <style type="text/css"> <!-- table { border:solid 1px black; text-align:center; border-spacing:0px; } th,td { border

  • JS 实现双色表格实现代码

    JS 实现双色表格实现代码

    原理其实很简单:利用getElementsByTagName得到所有的<tr>元素,然后分别为奇数项和偶数项的<tr>元素添加背景颜色. 核心代码: 复制代码 代码如下: <script type="text/javascript" > function color() { //把表头设为紫色 var th = document.getElementById("th"); th.style.background = "v

  • Jquery 动态生成表格示例代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

  • js双色时间效果代码

    TIMER TIMER [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • jQuery轻松实现表格的隔行变色和点击行变色的实例代码

    jQuery轻松实现表格的隔行变色和点击行变色的实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

  • 基于jquery实现的表格分页实现代码

    具体代码如下: 引用js和css文件有: 复制代码 代码如下: <link ID="skin" rel="stylesheet" type="text/css" href="css/config.css"> <script type="text/javascript" src="js/config.js"></script> <script ty

  • jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法.分享给大家供大家参考,具体如下: 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

  • 使用jquery datatable和bootsrap创建表格实例代码

    使用jquery datatable和bootsrap创建表格实例代码

    使用jquery-datatable插件 bootstrap前端框架 json 一.创建demo.html 代码块 代码块语法遵循标准markdown代码,例如: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" pref

  • jQuery实现合并表格单元格中相同行操作示例

    jQuery实现合并表格单元格中相同行操作示例

    本文实例讲述了jQuery实现合并表格单元格中相同行操作.分享给大家供大家参考,具体如下: 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列 }) /** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形式 $.f

随机推荐