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 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 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 zend解密软件绿色版测试可用
2008/04/14 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
python中class的定义及使用教程
2019/09/18 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
1亿有多大教学反思
2014/05/01 职场文书
社团活动总结模板
2014/06/30 职场文书
公司离职证明标准范本
2014/10/05 职场文书
道歉短信大全
2015/05/12 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
用Python可视化新冠疫情数据
2022/01/18 Python