用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 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
使用node.js搭建服务器
May 20 Javascript
Angular2安装angular-cli
May 21 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
create-react-app开发常用配置教程
Jun 25 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+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
JS前端加密算法示例
2016/12/22 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
javascript实现简易计算器
2017/02/01 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
python用户管理系统
2018/03/13 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
寒假思想汇报
2014/01/10 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python