视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
使用jquery来获取table表中td标签
2020-11-27 20:14:54 责编:小采
文档


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

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="#" 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="#" 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的管理

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

下载本文
显示全文
专题