用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 常用操作方法
Jan 28 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
详解angular element()方法使用
Apr 08 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
JS继承最简单的理解方式
Mar 31 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开发中页面乱码的产生与解决
2008/03/27 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
javascript表单验证大全
2015/08/12 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
python绘制条形图方法代码详解
2017/12/19 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
为什么会有内存对齐
2016/10/10 面试题
优秀团干部个人事迹
2014/05/29 职场文书
励志演讲稿200字
2014/08/21 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
技术员岗位职责
2015/02/04 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA