<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 点击某一行，得到这一行的每个列的数据的更多相关文章

  1. 利用jquery给指定的table动态添加一行、删除一行

    转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...

  2. 利用jquery给指定的table动态添加一行、删除一行，复制，值不重复等操作

    $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").f ...

  3. 利用jquery表格添加一行并在每行第一列大写字母显示实现方法

    表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...

  4. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  5. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. jquery点击改变图片src源码并toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  8. linux下在某行的前一行或后一行添加内容

    linux的sed工具是十分强大的,能很容易的实现在某关键词的前一行或后一行增加内容.今天在批量修改tomcat的日志时就用到了该功能. 一.在某行的前一行或后一行添加内容 具休操作如下: #匹配行前 ...

  9. jquery点击图片选中特效

    jquery点击图片选中特效 点击在线预览效果

  10. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

随机推荐

  1. caffe搭建--caffe- win10 vs2015 编译(支持GPU)--注意在cmake的时候需要根据情况仔细修改配置

    --http://blog.csdn.net/longji/article/details/60964998 注意: 在cmake的时候需要根据情况仔细修改配置,比如,如果gpu的能力不足3.0的话, ...

  2. iOS开发：Toast for iPhone

    iOS开发:Toast for iPhone   分享一个我写的类似于android的toast的提示框 主要特点: 1,支持屏幕Y轴任意位置显示,设置距离顶/底端距离 2,支持多行文本 3,支持设置 ...

  3. OpenCV 入门示例之一：显示图像

    前言 本文展示一个显示图像的示例程序,它用于从硬盘加载一副图像并在屏幕上显示. 代码示例 // 此头文件包含图像IO函数的声明 #include "highgui.h" int m ...

  4. Vmware虚拟机安装XP系统

    刚开始下载的雨林木风ghost镜像,首先是虚拟机无法自动识别系统版本.然后启动的时候也是无法从光驱启动,又接连下载了几个版本的系统镜像, 都是ghost的,都不好使,百度,偶然发现有人提了一句,需要用 ...

  5. 3438: 小M的作物[最小割]

    3438: 小M的作物 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1073  Solved: 465[Submit][Status][Discus ...

  6. 基于EasyDarwin云视频平台的幼儿园视频直播（手机直播/微信直播）解决方案

    一.方案介绍 1.1.方案背景 在2016年10月25日至28日的安博会上,我们看到了不少的幼教平台厂商,我们注意到大部分的幼教平台,为了追求极佳的用户体验,在微信或者APP端能够做到极快的打开速度, ...

  7. EasyRTMP实现RTMP异步直播推送之环形缓冲区设计

    本文转自EasyDarwin团队kim的博客:http://blog.csdn.net/jinlong0603 EasyRTMP的推送缓冲区设计 EasyRTMP内部也同样采用的环形缓冲的设计方法,将 ...

  8. EasyDarwin流媒体服务器RTSP拉模式流媒体转发模块设计

    拉模式转发 拉模式转发,顾名思义就是服务器主动从源端(IPCamera.NVR.或者其他流媒体服务器)通过RTSP/RTP协议将流媒体音视频数据拉取到流媒体转发服务器,再通过内部分发调度机制,分发给请 ...

  9. Vue 单页面应用 SEO SPA single page application advantages and disadvantages

    处理 Vue 单页面应用 SEO 的另一种思路 - muwoo - 博客园 https://www.cnblogs.com/tiedaweishao/p/7493971.html SPA网站SEO完美 ...

  10. Mac下通过命令行安装npm install -g 报错，如何解决？

    1, 使用 sudo npm install -g n2, 或者 sudo chmod -R 777 /usr/local/lib,然后 npm install -g