jQuery获取table表中的td标签(实例讲解)


Posted in jQuery onJuly 28, 2017

首先我来介绍一下我遇到的问题

1.当有一个table表包含了<tr>标签,<td>标签,大致可以认为是这样的:

<tr>
    <td>
      @scene.ID
    </td>
    <td>
      @scene.SceneName
    </td>
    <td>
      @scene.QRUrl
    </td>
    <td>
      @scene.LocalUrl
    </td>
    <td>
      <!--如果有图片,展示图片,没有图片生成图片-->
      <!--判断localUrl(本地服务器路径)是否为空,如果为空,表示没有生成,如果不为空表示已经生成-->
      @if (!string.IsNullOrWhiteSpace(scene.LocalUrl))
      {
        <!--图片不为空,展示图片地址-->
        <img src="@scene.LocalUrl" style="width:200px; height:100px"/>
      }
      else
      {
        <!--图片为空,生成图片-->
        <a sceneid="@scene.ID" href="#" rel="external nofollow" rel="external nofollow" onclick="build(this);">生成</a>
      }
    </td>
</tr>

2.这里有一个onclick事件,我要做的就是点击“生成”链接,要找到QRUrl的<td>标签和LocalUrl的<td>标签

首先我们点击这个a标签,执行jQuery中的点击事件

function build(sender){ var jqSender = $(sender); + +} 这里把js对象通过 $()转变成了jquery对象,下面的内容放在两个“+”之间。

var sceneid = jqSender.attr('sceneid'); //attr可以找到对象的属性的值,这里我们找到了sceneid这个属性的值

我需要拿到td标签,首先我应该知道是在哪一行,这跟定位是一样的。比如:在北京有一条南京路1号,在成都也有一条南京路1号,你问我在哪儿,我告诉你我在南京路1号,你能确定我是在北京还是成都吗,所以我们应该要定位,说我们在成都的南京路1号。

这里最好也要用eq()来获取某一行,如果页面代码需要修改,这会很麻烦。比如你要记我家在哪里,你需要知道的是街道、门牌号,你只知道是这条街第一座房子是我家,万一别人在这新增了一座房子,那就不是第一家了(比喻有点不恰当,但是计算机就是这么死板)。

所以,我们给这个tr设一个id,给QRUrl和LocalUrl设一个class,代码如下:

<tr sceneid="@scene.ID">
    <td>
      @scene.ID
    </td>
    <td>
      @scene.SceneName
    </td>
    <td class="wxurl-col">
      @scene.QRUrl
    </td>
    <td class="localurl-col">
      @scene.LocalUrl
    </td>
    <td>
      <!--如果有图片,展示图片,没有图片生成图片-->
      <!--判断localUrl(本地服务器路径)是否为空,如果为空,表示没有生成,如果不为空表示已经生成-->
      @if (!string.IsNullOrWhiteSpace(scene.LocalUrl))
      {
        <!--图片不为空,展示图片地址-->
        <img src="@scene.LocalUrl" style="width:200px; height:100px"/>
      }
      else
      {
        <!--图片为空,生成图片-->
        <a sceneid="@scene.ID" href="#" rel="external nofollow" rel="external nofollow" onclick="build(this);">生成</a>
      }
    </td>
  </tr>

那在jQuery里面就可以这样去找:

<script type="text/javascript">
  function build(sender) {
    var jqSender = $(sender);
    var sceneid = jqSender.attr('sceneid');

    //找到指定行类名为wxurl-col的td标签
    $('tbody tr[sceneid=' + sceneid + '] td.wxurl-col')

    //找到指定行类名为localurl-col的td标签
    $('tbody tr[sceneid=' + sceneid + '] td.localurl-col')

    //找到点击事件的a标签
    jqSender

}
</script>

td标签只是找出来了,并没有使用。

方法就是这样,给元素加“坐标”,为什么分别是id和类名,首先有很多行,要唯一确定只有加id,当行确定了,那列就可以是id也可以是class,建议用class,便于我们css的管理

注:此篇随笔只供参考使用,而且也有很多小瑕疵,最主要的不是代码,逻辑才是最重要的。

以上这篇jQuery获取table表中的td标签(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 #jQuery
jQuery实现键盘回车搜索功能
Jul 25 #jQuery
基于jquery实现多级菜单效果
Jul 25 #jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 #jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 #jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
You might like
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
简化php模板页面中分页代码的解析
2009/02/06 PHP
php 文件上传实例代码
2012/04/19 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
推荐dojo学习笔记
2007/03/24 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python获取央视节目单的实现代码
2015/07/25 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python中有几个关键字
2020/06/04 Python
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
毕业生欢送会主持词
2014/03/31 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2015年财政所工作总结
2015/04/25 职场文书
城南旧事电影观后感
2015/06/16 职场文书