jquery 点击某一行,得到这一行的每个列的数据
<html>
<head>
<title>test</title>
<script src="../Scripts/jquery-1.8.3.js"></script>
<style type="text/css">
table
{
border-collapse: collapse;
border-spacing: 0;
margin-right: auto;
margin-left: auto;
width: 800px;
}
th, td
{
border: 1px solid #b5d6e6;
font-size: 12px;
font-weight: normal;
text-align: center;
vertical-align: middle;
height: 20px;
}
th
{
background-color: Gray;
}
.hover
{
background-color: #cccc00;
}
</style>
<script type="text/javascript" >
$(document).ready(function () {
//鼠标移动到行变色,单独建立css类hover
//tr:gt(0):表示获取大于 tr index 为0 的所有tr,即不包括表头
$("#table3 tr:gt(0)").hover(
function () { $(this).addClass("hover") },
function () { $(this).removeClass("hover") })
});
//$(document).ready(function () {
// $("#table3 tr").click(function () {
// // // alert($(this).find("td").length);//td长度
// // alert($(this).parent().find("tr").length);//tr长度
// //alert($("#table3").find("tr").length);//tr长度
// //alert($(this).prevAll().length ); //tr所在行数
// TaskType = $(this).find("td").eq(0).text(); //
// alert(TaskType);
// });
//});
$(document).ready(function () {
//点击#table3 的单元格返回 单元格索引
$("#table3 td").click(function () {
// alert($(this).text);
var tdSeq = $(this).parent().find("td").index($(this));//当前列索引
var trSeq = $(this).parent().parent().find("tr").index($(this).parent());//当前行索引
// TaskType = $(this).parent().find("td").eq(tdSeq).text(); //用find()
TaskType = $(this).parent().children().eq(tdSeq).text(); //用children()
alert(TaskType);
// alert("第" + (trSeq) + "行," + (tdSeq + 1) + "列");
})
});
</script >
</head >
<body >
<table id="table3">
<tr >
<th style="width: 160px;" > 表头一</th >
<th style="width: 160px;" > 表头二 </th >
<th style="width: 160px;" > 表头三</th >
<th style="width: 160px;" > 表头四</th >
<th style="width: 160px;" > 表头五</th >
</tr >
<tr > <td > 第一行第一列</td > <td > 第一行第二列</td > <td > 第一行第三列</td > <td > 第一行第四列</td > <td > 第一行第五列</td > </tr >
<tr > <td > 第二行第一列</td > <td > 第二行第二列</td > <td > 第二行第三列</td > <td > 第二行第四列</td > <td > 第二行第五列</td > </tr >
<tr > <td > 第三行第一列</td > <td > 第三行第二列</td > <td > 第三行第三列</td > <td > 第三行第四列</td > <td > 第三行第五列</td > </tr >
<tr > <td > 第四行第一列</td > <td > 第四行第二列</td > <td > 第四行第三列</td > <td > 第四行第四列</td > <td > 第四行第五列</td > </tr >
</table >
</body >
</html >
jquery 点击某一行,得到这一行的每个列的数据的更多相关文章
- 利用jquery给指定的table动态添加一行、删除一行
转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...
- 利用jquery给指定的table动态添加一行、删除一行,复制,值不重复等操作
$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").f ...
- 利用jquery表格添加一行并在每行第一列大写字母显示实现方法
表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...
- jquery点击复选框触发事件给input赋值
体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jquery点击改变图片src源码并toggle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery点击改变class并toggle;jquery点击改变图片src源码并toggle;jquery显示隐藏toggle
<html><head><meta charset="utf-8"><title></title><script ...
- linux下在某行的前一行或后一行添加内容
linux的sed工具是十分强大的,能很容易的实现在某关键词的前一行或后一行增加内容.今天在批量修改tomcat的日志时就用到了该功能. 一.在某行的前一行或后一行添加内容 具休操作如下: #匹配行前 ...
- jquery点击图片选中特效
jquery点击图片选中特效 点击在线预览效果
- jQuery点击图片放大拖动查看效果
效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...
随机推荐
- Vuex demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- java 回文字符串
package string.string1_5; public class Palindrome { /** * 从两头向中间移动 * @param str * @return */ public ...
- iOS开发 - UIViewController控制器管理
创建一个控制器 控制器常见的创建方式有下面几种 //通过storyboard创建 //直接创建 ViewController *vc = [[ViewController alloc] init]; ...
- Centos7-安装Weblogic并配置 domain
1.创建用户组 [root@localhost weblogic]# groupadd weblogic 2.创建 tmn 用户 [root@localhost weblogic]# useradd ...
- 【BZOJ1085】[SCOI2005]骑士精神 双向BFS
[BZOJ1085][SCOI2005]骑士精神 Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它 ...
- 开源服务器监控工具 — JavaMelody 类 jvm 内在性能(转)
开源服务器监控工具 — JavaMelody JavaMelody它能够监测Java或Java EE应用程序服务器,并以图表的方式显示:Java内存和Java CPU使用情况,用户Sessio ...
- file descriptor 0 1 2 一切皆文件 stdout stderr stdin /dev/null 沉默是金 pipes
$>emtry_or_create_a_file.f $ll>>append_a_file.f standard output input error $ls -l /usr/bin ...
- CRM 安装不规范,亲人两行泪
安装CRM需要严格按照CRM部署文档的要求进行,比如设置CRM服务的服务账号一定要加入到CRM所在组织库用户里,不然会遇到下面错误.这个就是传递到SQL 的账号,在SQL那边不识别 <s:Env ...
- 用mingw-w64 编译 x64 位的ffmpeg
http://blog.sina.com.cn/s/blog_6125d067010168dt.html 工作中用到了ffmpeg x64. 发现编译出来x64的ffmpeg,很不容易.特记录下来.原 ...
- 关于RHEL5中yum挂载iso源引起的问题(转)
今天在虚机上通过yum挂载iso源来安装rpm包,但提示错误,内容见下面.之前也有过这样的操作, mount后,修改repo文件,然后就可以yum install rpm包了:过程很简单啊.不知道这 ...