jquery实现控制表格行高亮实例

[css]


代码如下:

<style>
.height{
  background:#666666;   /*背景颜色为灰色*/
}
tr{
    cursor: pointer;    /*手形*/  
}
</style>

<style>
.height{
  background:#666666;   /*背景颜色为灰色*/
}
tr{
 cursor: pointer;    /*手形*/
}
</style>

[html] 


代码如下:

<body>
<table border="1" width="40%">
   <tr><th></th><th align="left">姓名</th><th align="left">性别</th><th align="left">居住地</th></tr>
   <tr>
        <td><input type="radio" name="radio" /></td><td>张三</td><td>男</td><td>北京</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>李四</td><td>男</td><td>上海</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>王五</td><td>女</td><td>深圳</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>赵六</td><td>女</td><td>北京</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>孙七</td><td>男</td><td>上海</td>
   </tr>
</table>
</body>

<body>
<table border="1" width="40%">
   <tr><th></th><th align="left">姓名</th><th align="left">性别</th><th align="left">居住地</th></tr>
   <tr>
        <td><input type="radio" name="radio" /></td><td>张三</td><td>男</td><td>北京</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>李四</td><td>男</td><td>上海</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>王五</td><td>女</td><td>深圳</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>赵六</td><td>女</td><td>北京</td>
   </tr>
    <tr>
        <td><input type="radio" name="radio" /></td><td>孙七</td><td>男</td><td>上海</td>
   </tr>
</table>
</body>

jquery

[javascript]


代码如下:

plaincopyprint?$(document).ready(function(){
       //第一种写法: $("tr:gt(0)")   第一行标题不起作用  
       $("tr:gt(0)").click(function(){
              $(this).addClass("height").siblings().removeClass("height").end().find(":radio").attr("checked",true);
       })

//第二种写法：$("tr:not(:first)") 
       /*$("tr:not(:first)").click(function(){
              $(this).addClass("height").siblings().removeClass("height").end().find(":radio").attr("checked",true);
       })*/
})

$(document).ready(function(){
    //第一种写法: $("tr:gt(0)")   第一行标题不起作用
    $("tr:gt(0)").click(function(){
     $(this).addClass("height").siblings().removeClass("height").end().find(":radio").attr("checked",true);
    })

//第二种写法：$("tr:not(:first)")
    /*$("tr:not(:first)").click(function(){
     $(this).addClass("height").siblings().removeClass("height").end().find(":radio").attr("checked",true);
    })*/
})

赞 (0)

相关推荐

  • jQuery实现网站添加高亮突出显示效果的方法

    本文实例讲述了jQuery实现网站添加高亮突出显示效果的方法.分享给大家供大家参考.具体如下: 这段jquery代码演示了如何把整个页面遮罩起来,突出显示某些东西 $(function() { var docHeight = $(document).height(); $("body").append("<div id='overlay'></div>"); $("#overlay") .height(docHeight)

  • jquery实现页面关键词高亮显示的方法

    本文实例讲述了jquery实现页面关键词高亮显示的方法.分享给大家供大家参考.具体分析如下: 通过jquery对页面搜索关键词进行高亮显示 支持中文多词页面中高亮显示 1. JavaScript代码如下: 复制代码 代码如下: jQuery.fn.extend({     highlight: function(search, configs){         if(typeof(search) == 'undefined') return;         var configs =  jQ

  • Jquery简单实现GridView行高亮的方法

    本文实例讲述了Jquery简单实现GridView行高亮的方法.分享给大家供大家参考.具体实现方法如下: $("#gridID tr:not(tr:last-child)").filter(function () { return $('td', this).length && !('table', this).length }).hover(function () { $(this).toggleClass('hover_css'); }); 希望本文所述对大家的jQ

  • Jquery如何实现点击时高亮显示代码

    复制代码 代码如下: $(function(){ $(".menu").click(function(){ $(this).addClass("hover").siblings().removeClass("hover"); }); });

  • Jquery实现的一种常用高亮效果示例代码

    如下所示: 复制代码 代码如下: <html><head>    <title>jquery</title>    <style>        body        {            font-size: 12px;        }        li        {            list-style: none;            height: 34px;            padding-top: 5px;

  • jQuery实现高亮显示的方法

    本文实例讲述了jQuery实现高亮显示的方法.分享给大家供大家参考.具体如下: 主要功能代码如下: var v = window.location.pathname; $(".hd ul li a").each(function (i) { var vherf = $(this).attr("href"); if (v == vherf) { $(".hd ul li").eq(i).addClass("on") } else

  • jQuery实现当前页面标签高亮显示的方法

    本文实例讲述了jQuery实现当前页面标签高亮显示的方法.分享给大家供大家参考.具体实现方法如下: function nav(name, csskey,cssvalue) { var url = window.location.pathname + window.location.search; var v1 = ""; $(name).each(function () { v1 = "/" + $(this).attr("href"); if

  • jquery实现控制表格行高亮实例

    [css] 复制代码 代码如下: <style> .height{   background:#666666;   /*背景颜色为灰色*/ } tr{     cursor: pointer;    /*手形*/   } </style> <style>.height{  background:#666666;   /*背景颜色为灰色*/}tr{ cursor: pointer;    /*手形*/ }</style> [html]  复制代码 代码如下:

  • JS实现控制表格行内容垂直对齐的方法

    本文实例讲述了JS实现控制表格行内容垂直对齐的方法.分享给大家供大家参考.具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶.可以居中.可以底部对齐 <!DOCTYPE html> <html> <head> <script> function topAlign() { document.getElementById('tr2').vAlign="top"; } </script> <

  • 删除table表格行的实例讲解

    实例如下: function getRowObj(obj) { while(obj.tagName.toLowerCase()!="tr") // toLowerCase转化小写 { obj=obj.parentNode; } // 得到父节点 return obj; } function sc(obj) // sc为点击事件 { var tr=this.getRowObj(obj); // 调用上面的方法 tr.parentNode.removeChild(tr); // 得到tr的

  • Jquery+bootstrap实现表格行置顶置底上移下移操作详解

    Jquery+bootstrap实现表格行置顶置底上移下移操作详解

    最近接到产品的一个需求,它是要对数据排序,实际操作中我们要实现表格行置顶置底上移下移操作.项目框架是GUNS框架. 如下图: 我是怎么用Jquery+bootstrap进行实现这些功能的呢?往下看就知道了. 1.html @layout("/common/_container.html"){ <div class="row">     <div class="col-sm-12">         <div clas

  • jquery实现更改表格行顺序示例

    表格部分如下: 复制代码 代码如下: <table class="table" id="test_table">    <thead>        <tr>               <th>时间</th>            <th>详情</th>            <th>操作</th>        </tr>    </th

  • 用javascript 控制表格行的展开和隐藏的代码

    无标题文档 function $(obj) { return document.getElementById(obj); } function close_open() { if($("myTr").currentStyle.display == "none") { $("myTr").style.display = ""; } else { $("myTr").style.display = "

  • 详解jQuery简单的表格应用

    大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQuery的认识. 表格变色 基本的结构: <table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbod

  • 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控制表格奇偶行及活动行颜色

    虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难,但已经不像以前一样无从下手了.做完后不得不来感叹一下jquery真是太牛了,不用自己再写一大堆javascript函数去实现了,简单几句轻松搞定. 先定义好表格的奇偶行样式,如下代码: 复制代码 代码如下: body { font-size:12px; } th { color: #FFFFFF;

随机推荐