JQuery_如何給表格元素新增超連結
阿新 • • 發佈:2019-01-05
今天遇見的主要需求就是給表格中的兩列資料新增超連結,也是鼓搗了好久,將解決過程記錄下來。方便回憶
首先說明的是:這個列表是公司的工具方法統一拼裝而成的,需要我們傳入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()。這個方法可以內包裹,它包裹的是
選中元素的子內容