用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图片切换效果实现代码
Sep 24 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
解决vue移动端适配问题
Dec 12 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
javascript测试题练习代码
2012/10/10 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Django model select的多种用法详解
2019/07/16 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
机械专业应届生求职信
2013/09/21 职场文书
旷课检讨书2000字
2014/01/14 职场文书
美术教师个人工作总结
2015/02/06 职场文书
办公室日常管理制度
2015/08/04 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
python for循环赋值问题
2021/06/03 Python
python解析json数据
2022/04/29 Python