用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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
vant中的toast轻提示实现代码
Nov 04 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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
ThinkPHP之N方法实例详解
2014/06/20 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
JavaScript中的类继承
2010/11/25 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
详解python播放音频的三种方法
2019/09/23 Python
详解python中各种文件打开模式
2020/01/19 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
财务会计人员岗位职责
2013/11/30 职场文书
大学活动邀请函
2014/01/28 职场文书
销售类求职信
2014/06/13 职场文书
时尚女魔头观后感
2015/06/04 职场文书
初中生物教学反思
2016/02/20 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
SQLServer之常用函数总结详解
2021/08/30 SQL Server