今天遇见的主要需求就是给表格中的两列数据添加超链接,也是鼓捣了好久,将解决过程记录下来。方便回忆
首先说明的是:这个列表是公司的工具方法统一拼装而成的,需要我们传入list集合数据,自动生成表格。使用
Jquery可以很方便的获取特定行特定列的数据,但是一整列的数据我找不到获取的方法(如果有,以后再记录)
所以我的方案不是对表格动手,而是对这个集合动手。
流程
网页请求,后台响应,返回一个包含list集合的json,获取到这个list集合后,先遍历每行,找到对应列(比如我
得需求就是将第三列和第四列添加上超链接),然后写个方法传入行数和列数就行了。
js代码如下:
function addHyperlink(list){
//遍历数组
for(var i =0, len=pageList.length;i<=len;i++){
//行和列的计算也是从0开始的
add(i,2, webPath+"/showProvince.do");
add(i,3, webPath+"/showCity.do");
}
}
因为我第二列和第三列跳转的页面不一样,所以add()方法需要我自己传入一个url
function add(rowIndex, cellIndex, url) {
//获取特定行特定列,然后添加超链接
$("tr:eq("+rowIndex+")").find("td").eq(cellIndex).wrapInner("<a href='url'></a>")
{
其实也可以不需要第二个add方法,不过我需要处理的逻辑多,所以添加了这个add方法,如果只是添加超链接,
直接在遍历数组的时候添加就行了。
总结:
给某列数据批量添加超链接我到现在还不是很熟练,上面这个功能刚好是因为能够遍历到list集合,所以
简化了很多代码。 还有就是添加超链接我使用了wrapInner()方法。 其余的append(),appendTo(),
wrap(),.html()都试过,但是达到我想要的效果的就是这个wrapInner()。这个方法可以内包裹,它包裹的是
选中元素的子内容