jQuery表格中實現(xiàn)“刪除線”的增進方法
之前做了一個刪除線的效果，就是類似這樣的，在內(nèi)容的中間加一條線。 但是又有點不同的是，這種刪除線不是單純的在文字之上，而是給一個Table中的一行加上這種刪除線效果。
為永登等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及永登網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站建設、網(wǎng)站設計、永登網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
這里有兩個方法，是在不同時期寫的，第一個有些缺陷，第二個在第一個基礎上要好很多，目前沒有發(fā)現(xiàn)什么缺陷吧。
直接上代碼吧
頁面內(nèi)容：
| 序號 |
姓名 |
年齡 |
球隊 |
球衣號碼 |
位置 |
身高 |
體重 |
簡介 |
操作 |
| 1 |
喬丹 |
|
芝加哥公牛隊 |
23 |
得分后衛(wèi) |
198公分 |
|
|
|
| 2 |
科比 |
|
洛杉磯湖人隊 |
24 |
得分后衛(wèi) |
198公分 |
|
|
|
| 3 |
詹姆斯 |
|
克里夫蘭騎士隊 |
23 |
小前鋒 |
203公分 |
|
|
|
| 4 |
杜蘭特 |
|
俄克拉荷馬雷霆隊 |
35 |
小前鋒 |
210公分 |
|
|
|
| 5 |
保羅 |
|
洛杉磯快船隊 |
3 |
控球后衛(wèi) |
188公分 |
|
|
|
頁面效果：
jQuery代碼（第一次）：
$(function(){ //添加tr背景色
$("table tr:first").css("background-color","#696969");
$("table tr:even").not("table tr:first").css("background-color","#98F5FF");
$("table tr:odd").css("background-color","#90EE90");
//刪除按鈕點擊事件
$("input[type='button']").click(function(){
$(this).parent().parent().line();
});
})
$.fn.line = function () { return $(this).children("td").each(function (index) {
$(this).children().attr("disabled", "disabled").children().attr("disabled", "disabled");
if (index == 0) {//重點部分
var t = $(this).offset().top + $(this).height();//1、獲得對應行，第一列相對于瀏覽器頂部的位移
var l = $(this).offset().left;//2、獲得對應行，第一列相對于瀏覽器左側(cè)的位移
var w = $(this).parent("tr").width();//3、獲得對應行的寬度
$(this).children("*:last").after("
");//4
}
});
}
點擊刪除按鈕效果如下:
jQuery代碼（第二次）：
主要就是修改了line方法里的內(nèi)容
$.fn.line = function () { return $(this).children("td").each(function (index) {
$(this).children().attr("disabled", "disabled").children().attr("disabled", "disabled");
if (index == 0) {//重點部分
$(this).children("*:first").before(" ");//5
}
});大家有沒有發(fā)現(xiàn)，做了一些小改動，不同點就在于line方法中加的動態(tài)浮動div的形態(tài)。從界面顯示可能不太看出來，大家會覺得都差不多啊，而且細心的朋友會發(fā)現(xiàn)，第二次的刪除線已經(jīng)延伸到了表格之外，有些不好看，這塊的修改方法大家可以把>
當然，第二次的刪除線不只是在這方面上比第一次的有優(yōu)勢，更重要的是因為，第二次的浮動不依賴于其他條件。所謂的其他條件是什么？比如，因為第一個里面用到了相對位移的東西，所以如果當含有刪除線的這個table在頁面最初加載時是隱藏狀態(tài)的（有可能的，如果tab標簽里不是第一個）。根本就取不到相對位移的值，這樣就會出錯。
再比如，用js想做一個打印頁面的功能時，你需要讀取原頁面的html元素，把其放在打印窗口中，但是此時的刪除線的相對位移就不是針對打印窗口而言了，所以基本也都會出錯。
而第二次的刪除線就完全不用考慮相對位移的問題了，當其插入每一行表格的第一列之后，絕對定位，脫離原來的文檔流，調(diào)整一下上內(nèi)邊距，就有一個元素塊在這一行上，然后里面包一個“線”就OK了。
重慶分公司
重慶分公司
