获取jqGrid中每行的子元素td并修改其属性

最新推荐文章于 2021-09-16 17:52:59 发布

jsy625

最新推荐文章于 2021-09-16 17:52:59 发布

阅读量6.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识文章标签： jqGrid

本文链接：https://blog.youkuaiyun.com/jsy625/article/details/46422685

前端知识专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在jqGrid表格中实现特定需求，即通过JavaScript代码动态设置每一行中指定列元素的title属性，使其在鼠标悬停时显示自定义内容，而非默认值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取jqGrid中每行的子元素td并修改其属性

　　最近项目中用到了jqGrid来显示表格，使用起来确实非常方便，值得推荐。昨天，遇到了一个看起来简单的需求，但是网上却没找到这个需求的解决方案（可能是信息检索能力有限，或者英文阅读能力有限），于是把摸索后的解决方案整理如下。

需求：实现表中某列元素title的自定义

　　jqGrid表中每行的每个td的title都是确定的，默认为该td中的值。当然这个title也可以在colModel中设置成false（默认为true），这样鼠标移上去就不会有显示了。但是目前的需求是，当鼠标移上去后显示其他内容，而不是td中的值，这在表格初始化的时候不能设置，只能等loadComplete以后再获取每行中的某个td进行设置。

解决方案

思路：获取所有行——获取每行id——根据每行id获得该行的数据——获取改行的每个子元素td——设置子元素td的属性title
解决方案：

loadComplete: function(xhr) {
//获取所有行的id，其中“card_list”为表格名称
var rowIds = jQuery("#card_list").jqGrid('getDataIDs');
for(var k=0; k<rowIds.length; k++) {
//获取对应行的数据
   var curRowData = jQuery("#card_list").jqGrid('getRowData', rowIds[k]);
   //获取对应行的所有子元素td，返回数组的形式
   var cur = $("#"+rowIds[k] +">td");
   //获取某个子元素并设置它的属性title
   var data = cur[7].setAttribute('title', curRowData.userId)
            }
        }