首页
所有分类
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 相关文章推荐
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
简单了解JavaScript异步
May 23 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
js实现弹幕飞机效果
Aug 27 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
美国航天局(1) NASA(1) 太空(1) 塑料(1) 天问一号(1) 酶(1) 毅力号(1) 数据(1) 人造肉(1) 火星(2)
You might like
php通用防注入程序 推荐
2011/02/26 PHP
php实现的短网址算法分享
2014/06/20 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
Javascript之面向对象--封装
2016/12/02 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
意大利奢侈品牌在线精品店：Jole.it
2020/11/23 全球购物
应聘自荐书
2013/10/08 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
配件采购员岗位职责
2013/12/03 职场文书
党员政治学习材料
2014/05/14 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
高中综合实践活动总结
2014/07/07 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
军训通讯稿范文
2015/07/18 职场文书
React自定义hook的方法
2022/06/25 Javascript