运用jquery实现table单双行不同显示并能单行选中

代码如下:

$(document).ready(function(){
$("p:odd").css("background-color", "#bbf");
$("p:even").css("background-color","#ffc");
$("p").click(function () {
$("p").each(function(){
if($(this).hasClass("highlight")){
$(this).removeClass("highlight");
}});
$(this).addClass("highlight");
});
});

源码参考gamil:test_jquery_table

赞 (0)

相关推荐

  • 用jQuery获取table中行id和td值的实现代码

    用jQuery获取table中行id和td值的实现代码 <%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); %> <!DOCTYPE html> <html lang="zh-cn"> <head> <title>点击</title>

  • jquery获取table中的某行全部td的内容方法

    复制代码 代码如下: <table><tr class="PurViewData" id="trid95">    <td>14</td>    <td id="95"><a style="color:#0000CC" href="/PurviewManage/AddPurview?id=95">TopParty优惠</a>

  • 基于jquery的合并table相同单元格的插件(精简版)

    效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ

  • jquery实现效果比较好的table选中行颜色

    jquery实现效果比较好的table选中行颜色

    jquery table选中行颜色(效果更好) 复制代码 代码如下: <html> <head> <style type="text/css"> .table-tr-title{ height: 26px; font-size: 12px; text-align: center; } .table-tr-content{ height: 18px; background: #FFFFFF; text-align: center; font-size:

  • 合并table相同单元格的jquery插件分享(很精简)

    效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ

  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

  • JQuery动态给table添加、删除行 改进版

    复制代码 代码如下: <html> <head> <title> </title> <script src="js/jquery-1.4.2_min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> var row

  • JQuery DataTable删除行后的页面更新利用Ajax解决

    使用Jquery的DataTable进行数据表处理非常方便,常遇到的一个问题就是删除一行后页面必须进行更新,需要注意的方法如下:前台页面中初始化table时注意: 复制代码 代码如下: var table = $('#sorting-advanced'); table.dataTable({ 'bServerSide': true, 'sAjaxSource': 'servlet/UserList<%=queryString%>', 'bProcessing': true, 'bStateSa

  • JS与jQuery遍历Table所有单元格内容的方法

    本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /

  • jQuery获取table行数并输出单元格内容的实现方法

    本文实例讲述了jQuery获取table行数并输出单元格内容.分享给大家供大家参考,具体如下: js部分: <script language="javascript" type="text/javascript"> $(function() { $("#txtInput").attr("value", "90"); var v_temp = $("#lblMessage").

  • jQuery 选择表格(table)里的行和列及改变简单样式

    jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序.样式改变等等.如果你的英文够好,你可以读读这篇文章:jQuery table manipulation.本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助. 比如我们有这样一个表格: 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三

  • 使用jquery为table动态添加行的实现代码

    这里,用的jquery来做的.关键代码如下: 复制代码 代码如下: //添加數據行: function AddRow(){ var vTb=$("#TbData");//得到表格ID=TbData的jquery对象 //所有的数据行有一个.CaseRow的Class,得到数据行的大小 var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行 var vTr=$("#

  • 用Jquery选择器计算table中的某一列某一行的合计

    用Jquery选择器计算table中的某一列某一行的合计

    利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便.下面以计算行合计为例: 核心算法: $('#tableId tr').each(function() { $(this).find('td:eq(columnIndex)').each(function() { totalAmount += parseFloat($(this).text()); }) }); 下面是案例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

随机推荐