用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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
JsRender for object语法简介
Oct 31 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
vue实现通讯录功能
Jul 14 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 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
for循环连续求和、九九乘法表代码
2012/02/20 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python迭代dict的key和value的方法
2018/07/06 Python
Python自动化操作实现图例绘制
2020/07/09 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
新教师工作感言
2014/02/16 职场文书
委托证明范本
2014/11/25 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
学校标语口号大全
2015/12/26 职场文书
卖车协议书范文
2016/03/23 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python