用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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
详解JS预解析原理
Jun 16 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
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
python获取代码运行时间的实例代码
2018/06/11 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
黄继光的英雄事迹材料
2014/02/13 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
复活读书笔记
2015/06/29 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫