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


Posted in Javascript onMay 19, 2016

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

<%@ page language="java" pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>点击</title>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="zh-cn" />
    <meta name="author" content="linjiqin218@126.com" />
    <meta name="Copyright" content="parami|三水点靠木" />

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <jsp:include page="/demo/base/js_bootstrap.jsp" />
    <script type="text/javascript">
    $(function(){
      //用jQuery获取table中td值
      $("#mytable td").click(function(){
        alert("table td值:"+$(this).text());
      });
      
      //jQuery获取table中点击位置所在行的id
      $("#mytable td").click(function() {
        //td的id 
        alert($(this).attr("id"));
        //tr的id 
        alert($(this).parent().attr("id"));
      });
    });
    </script>
  </head>
  <body>
  <table id="mytable" width="708px;" cellpadding="5" cellspacing="1">
    <tbody>
      <tr bgcolor="#DEE9F4" id="tr_1">
        <td align="center"> 日</td>
        <td align="center"> 一 </td>
        <td align="center"> 二 </td>
        <td align="center"> 三 </td>
        <td align="center"> 四 </td>
        <td align="center"> 五 </td>
        <td align="center"> 六 </td>
      </tr>
      <tr bgcolor="#DEE9F4" id="tr_2">
        <td align="center">   </td>
        <td align="center">   </td>
        <td align="center">   </td>
        <td align="center"> 1 </td>
        <td align="center"> 2 </td>
        <td align="center"> 3 </td>
        <td align="center"> 4</td>
      </tr>
      <tr bgcolor="#DEE9F4" id="tr_3">
        <td align="center"> 5 </td>
        <td align="center"> 6 </td>
        <td align="center"> 7 </td>
        <td align="center"> 8 </td>
        <td align="center"> 9 </td>
        <td align="center" bgcolor="red">10</td>
        <td align="center">11</td>
      </tr>
      <tr bgcolor="#DEE9F4" id="tr_4">
        <td align="center"> 12 </td>
        <td align="center"> 13 </td>
        <td align="center"> 14 </td>
        <td align="center"> 15 </td>
        <td align="center"> 16 </td>
        <td align="center"> 17 </td>
        <td align="center"> 18 </td>
      </tr>
    </tbody>
  </table>  
  </body>
</html>

以上这篇用jQuery获取table中行id和td值的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 #Javascript
jquery if条件语句的写法
May 19 #Javascript
laypage分页控件使用实例详解
May 19 #Javascript
js多功能分页组件layPage使用方法详解
May 19 #Javascript
深入理解MVC中的时间js格式化
May 19 #Javascript
Node.js+Express配置入门教程详解
May 19 #Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 #Javascript
You might like
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
PHP之数组学习
2011/05/29 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
php实现的RSS生成类实例
2015/04/23 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
利用javascript查看html源文件
2006/11/08 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
Javascript实现字数统计
2015/07/03 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
python聊天程序实例代码分享
2013/11/18 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python数据可视化之画图
2019/01/15 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
销售行政专员职责
2014/01/03 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
创建文明学校实施方案
2014/03/11 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
小学教师求职信范文
2015/03/20 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang