用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 相关文章推荐
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
jQuery事件用法详解
Oct 06 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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启动时候提示PHP startup的解决方法
2013/05/07 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
smarty缓存用法分析
2014/12/16 PHP
php实现微信公众号无限群发
2015/10/11 PHP
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
对Python _取log的几种方式小结
2019/07/25 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
市场营销专业推荐信
2013/11/03 职场文书
团工委书记自荐书范文
2013/12/17 职场文书
寄语十八大感言
2014/02/07 职场文书
新闻发布会主持词
2014/03/28 职场文书
文艺演出策划方案
2014/06/07 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书