用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 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
javascript中expression的用法整理
May 13 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
Vue通过input筛选数据
Oct 26 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 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
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
python脚本内运行linux命令的方法
2015/07/02 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
python打造爬虫代理池过程解析
2019/08/15 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
python如何实现递归转非递归
2021/02/25 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
道德模范先进事迹
2014/02/14 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
卖车协议书
2014/04/21 职场文书
大学生简短的自我评价
2014/09/12 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
圆明园纪录片观后感
2015/06/03 职场文书