用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 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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
php中的MVC模式运用技巧
2007/05/03 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
javascript中的面向对象
2017/03/30 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
小程序实现多列选择器
2019/02/15 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Python中的多重装饰器
2015/04/11 Python
Python代码调试的几种方法总结
2015/04/15 Python
python 基础教程之Map使用方法
2017/01/17 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
优秀乡村医生先进事迹材料
2014/08/23 职场文书
酒店端午节活动方案
2014/08/26 职场文书
股东授权委托书
2014/10/15 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技