用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字符编码函数区别分析
Jun 05 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 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
第五节 克隆 [5]
2006/10/09 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
php全排列递归算法代码
2012/10/09 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中apply函数的用法实例教程
2014/07/31 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
django使用多个数据库的方法实例
2021/03/04 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
大二自我鉴定范文
2013/10/05 职场文书
应聘美工求职信
2013/11/07 职场文书
《母鸡》教学反思
2014/02/25 职场文书
租车协议书范本
2014/04/22 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫