@CHARSET "UTF-8";
#table_id tbody tr.odd td:hover{
background-color:#93CFE5;
} #table_id tbody .even td:hover{
background-color:#93CFE5;
} ----------------------------------------
意思就是鼠标指针变成 手 的形状,和放到链接上面的鼠标指针一样。
style="cursor:pointer;
---------------------------------------------------------
找到每个段落紧邻的前一个同辈元素。 HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>jQuery 代码:
$("p").prev()结果:
[ <div><span>Hello Again</span></div> ]
---------------------------------------------------------------------------------------------------------------------------------------------------
<table id="data-table"
class="table table-bordered nowrap" width="100%">
<thead>
<tr> <th style="display:none;">编号</th>
<th><input type="checkbox" id="selectall"/></th>
<th>型号</th>
<th>航班号</th>
<th>F价格</th>
<th>B价格</th>
<th>E价格</th>
<th>C价格</th>
<th>F数量</th>
<th>B数量</th>
<th>E数量</th>
<th>C数量</th>
<th style="display:none;">图片地址</th>
<th style="display:none;">状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<s:iterator value="planelist" var="plane">
<tr>
<td style="display:none;"><s:property value="#plane.id" /></td>
<td><input type="checkbox" name="pid" value="<s:property value="#plane.id" />"/></td>
<td class="ptype" style="cursor:pointer;"><s:property value="#plane.planetype" /></td>
<td><s:property value="#plane.lname" /></td>
<td><s:property value="#plane.tdcprice" /></td>
<td><s:property value="#plane.swcprice" /></td>
<td><s:property value="#plane.jjcprice" /></td>
<td><s:property value="#plane.thcprice" /></td>
<td><s:property value="#plane.tdcnum" /></td>
<td><s:property value="#plane.swcnum" /></td>
<td><s:property value="#plane.jjcnum" /></td>
<td><s:property value="#plane.thcnum" /></td>
<td style="display:none;"><s:property value="#plane.imgurl" /></td>
<td class="pstatus" style="display:none;"><s:property value="#plane.status" /></td>
<td>
<button class="btn btn-primary edit-btn" data-toggle="modal"
data-target="#myModal">修改</button>
</td>
</tr>
</s:iterator>
</tbody>
</table>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
<script>
$(function(){
$('#data-table tbody tr td.ptype').click( function () {
var pid=$(this).prev("td").prev("td").eq(0).text()
$.ajax({
type:"post",
url:'plane!planeinfo.action?plane.id='+pid,
dataType:"json",
data:{
},
success:function(data,textStatus){
var h=$("#morris-donut-chart").parent().parent().parent().offset().top;
$("#morris-donut-chart").prev("h4").text(data.planetype+"的座位数量");
$(document).scrollTop(h);
$("#morris-donut-chart").html("");
var blue = "#348fe2",
blueLight = "#5da5e8", blueDark = "#1993E4", aqua = "#49b6d6",
aquaLight = "#6dc5de", aquaDark = "#3a92ab", green = "#00acac",
greenLight = "#33bdbd", greenDark = "#008a8a", orange = "#f59c1a",
orangeLight = "#f7b048", orangeDark = "#c47d15", dark = "#2d353c",
grey = "#b6c2c9", purple = "#727cb6", purpleLight = "#8e96c5", purpleDark = "#5b6392",
red = "#ff5b57";
var Path=getRootPath();
$("#planeimg").attr("src",Path+data.imgurl);
$("#planeimg").parent().prev("h4").text(data.planetype+'的舱位分布图');
Morris.Donut({
element: 'morris-donut-chart',
data: [
{value: data.tdcnum, label: '头等舱'},
{value: data.swcnum, label: '商务舱'},
{value: data.jjcnum, label: '经济舱'},
{value: data.thcnum, label: '特惠舱'}
],
colors: ['#E75045', '#5FBBEC', '#69C7A3', grey],
resize: true,
formatter: function (x) { return x + "个"}
}).on('click', function(i, row){
console.log(i, row);
});
},
error:function(){
alert("错误!");
}
})
})
}) function getRootPath(){
//获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp
var curWwwPath=window.document.location.href;
//获取主机地址之后的目录,如: uimcardprj/share/meun.jsp
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取主机地址,如: http://localhost:8083
var localhostPaht=curWwwPath.substring(0,pos);
//获取带"/"的项目名,如:/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return(localhostPaht+projectName);
} </script>
---------------------------------------------------------------------------------------
参数index描述:
获取匹配的第二个元素 HTML 代码:
<p> This is just a test.</p> <p> So is this</p>jQuery 代码:
$("p").eq(1)结果:
[ <p> So is this</p> ]
------------------------------
prev([expr])
概述
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。
----------------------------------------------------------------------------------------
offset([coordinates])
概述
获取匹配元素在当前视口的相对偏移。 返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。 -----------------------------------------------------------------------------
示例
描述:
查找每个段落的父元素 HTML 代码:
<div><p>Hello</p><p>Hello</p></div>jQuery 代码:
$("p").parent()结果:
[ <div><p>Hello</p><p>Hello</p></div>]
---------------------------------------------------------------------------

一段jquery代码,保存的更多相关文章

  1. 我的第一段jQuery代码

    说起 jQuery,很多人可能觉得,不算什么,就是个js类库.而,对于我,下面这几行代码,是一个新的开始. 多年来,我一直在使用MooTools ,他面向对象,写起来结构清晰分明,都是在原生js的基础 ...

  2. 经验分享:10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  3. 10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

  4. 十五个常用的jquery代码段【转】

    好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...

  5. 十五个常用的jquery代码段

    十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...

  6. 50个必备的实用jQuery代码段

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...

  7. 50个实用的jQuery代码段让你成为更好的Web前端工程师

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...

  8. 50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段

    50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段 本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从j ...

  9. 【摘】50个jQuery代码段帮助你成为一个更好的JavaScript开发者

    今 天的帖子会给你们展示50个jQuery代码片段,这些代码能够给你的JavaScript项目提供帮助.其中的一些代码段是从jQuery1.4.2才 开始支持的做法,另一些则是真正有用的函数或方法,他 ...

随机推荐

  1. 转:几十种编程语言的快速入门教程- learnxinyminutes.com

    原文来自于:http://top.jobbole.com/15551/ 这家网站的名称是 Learn X in Y minutes,包括了几十种编程语言的快速学习入门教程.打开几种编程语言来看了一下, ...

  2. 用Jquery 仿VS 样式的 导航栏插件

    在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个. 由于前台用JQuery开发, 想到网上很多人用JQuery做插件, ...

  3. .c 文件取为.o文件

    $(xxx:%.c=%.o) 即可 例子: $(ALLFILES:%.c=%.o)

  4. 【转】常见 jar包详解

    转载自:http://www.cnblogs.com/xusir/archive/2013/05/19/3086878.html   jar包 用途 axis.jar SOAP引擎包 commons- ...

  5. Delphi调用WINAPI时到底应该是指针还是结构体(注意是Delphi变量本身就是指针)

    看MSDN,GetWindowRect的说明如下: BOOL WINAPI GetWindowRect( _In_  HWND   hWnd, _Out_ LPRECT lpRect // 注意,没* ...

  6. Maven实战一

    转载:http://www.iteye.com/topic/1123221 1. 用Maven 命令创建一个简单的Maven项目 在cmd中运行如下命令: Cmd代码 mvn archetype:ge ...

  7. 「Poetize5」水叮当的舞步

    Description 水叮当得到了一块五颜六色的格子形地毯作为生日礼物,更加特别的是,地毯上格子的颜色还能随着踩踏而改变. 为了讨好她的偶像虹猫,水叮当决定在地毯上跳一支轻盈的舞来卖萌~~~ 地毯上 ...

  8. SVN服务器搭建(与apache整合)

    一.SVN介绍 SVN是一个版本控制工具,Subversion的版本库(repository),就是位于服务器,统一管理和储存数据的地方. 二.SVN数据存储方式 在Subversion中,版本库的数 ...

  9. 【转】ConcurrentModificationException异常解决办法 --不错

    原文网址:http://blog.sina.com.cn/s/blog_465bcfba01000ds7.html 1月30日java.util.ConcurrentModificationExcep ...

  10. bzoj3223 Tyvj 1729 文艺平衡树(Splay Tree+区间翻转)

    3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2202  Solved: 1226[Submit][Sta ...