首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

用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值的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一个很酷的拖动层的js类，兼容IE及Firefox
Jun 23 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
对node.js中render和send的用法详解
May 14 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
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
Telnet(1) Windows server 2016(6) https(7) 防盗链(1) 动静分离(1) http(6) IIS(7) 负载均衡(6) 反向代理(2) 生成缩略图(1)
You might like
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
发两个小东西，ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）
2010/03/24 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python字符串中查找子串小技巧
2015/04/10 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
玩具反斗城葡萄牙官方商城：Toys"R"Us葡萄牙
2016/10/21 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装：Rivers
2019/04/23 全球购物
白俄罗斯女装和针织品网上商店：Presli.by
2019/10/13 全球购物
CK澳大利亚官网：Calvin Klein澳大利亚
2020/12/12 全球购物
关于迟到的检讨书
2014/01/26 职场文书
寄语是什么意思
2014/04/10 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python