1. 程式人生 > >JQuery_如何給表格元素新增超連結

JQuery_如何給表格元素新增超連結

今天遇見的主要需求就是給表格中的兩列資料新增超連結,也是鼓搗了好久,將解決過程記錄下來。方便回憶

首先說明的是:這個列表是公司的工具方法統一拼裝而成的,需要我們傳入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()。這個方法可以內包裹,它包裹的是

選中元素的子內容