jQuery 表格中實現「刪除線」的增進方法

時間 2019-12-08

原文原文鏈接

以前作了一個刪除線的效果，就是相似這樣的，在內容的中間加一條線。可是又有點不一樣的是，這種刪除線不是單純的在文字之上，而是給一個Table中的一行加上這種刪除線效果。javascript

這裏有兩個方法，是在不一樣時期寫的，第一個有些缺陷，第二個在第一個基礎上要好不少，目前沒有發現什麼缺陷吧。css

直接上代碼吧html

頁面內容：java

    <body>
        <table style="border:1px solid black;padding-left:5px;padding-right:5px;" cellpadding="10%" rules="cols">
            <tr style="border-bottom:1px solid;color:#fff">
                <th>序號</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>球隊</th>
                <th>球衣號碼</th>
                <th>位置</th>
                <th>身高</th>
                <th>體重</th>
                <th>簡介</th>
                <th>操做</th>
            </tr>
            <tr>
                <td><span>1</span></td>
                <td>喬丹</td>
                <td>&nbsp;</td>
                <td>芝加哥公牛隊</td>
                <td>23</td>
                <td>得分後衛</td>
                <td>198公分</td>
                <td>&nbsp;</td>
                <td><input type='text' style="width:200px" /></td>
                <td><input type='button' value="刪除" style="width:50px" /></td>
            </tr>
            <tr>
                <td><span>2</span></td>
                <td>科比</td>
                <td>&nbsp;</td>
                <td>洛杉磯湖人隊</td>
                <td>24</td>
                <td>得分後衛</td>
                <td>198公分</td>
                <td>&nbsp;</td>
                <td><input type='text' style="width:200px" /></td>
                <td><input type='button' value="刪除" style="width:50px" /></td>
            </tr>
            <tr>
                <td><span>3</span></td>
                <td>詹姆斯</td>
                <td>&nbsp;</td>
                <td>克里夫蘭騎士隊</td>
                <td>23</td>
                <td>小前鋒</td>
                <td>203公分</td>
                <td>&nbsp;</td>
                <td><input type='text' style="width:200px" /></td>
                <td><input type='button' value="刪除" style="width:50px" /></td>
            </tr>
            <tr>
                <td><span>4</span></td>
                <td>杜蘭特</td>
                <td>&nbsp;</td>
                <td>俄克拉荷馬雷霆隊</td>
                <td>35</td>
                <td>小前鋒</td>
                <td>210公分</td>
                <td>&nbsp;</td>
                <td><input type='text' style="width:200px" /></td>
                <td><input type='button' value="刪除" style="width:50px" /></td>
            </tr>
            <tr>
                <td><span>5</span></td>
                <td>保羅</td>
                <td>&nbsp;</td>
                <td>洛杉磯快船隊</td>
                <td>3</td>
                <td>控球后衛</td>
                <td>188公分</td>
                <td>&nbsp;</td>
                <td><input type='text' style="width:200px" /></td>
                <td><input type='button' value="刪除" style="width:50px" /></td>
            </tr>
        </table>
    </body>

頁面效果：瀏覽器

jQuery代碼（第一次）：this

        <script type="text/javascript">
            $(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();//一、得到對應行，第一列相對於瀏覽器頂部的位移
                        var l = $(this).offset().left;//二、得到對應行，第一列相對於瀏覽器左側的位移
                        var w = $(this).parent("tr").width();//三、得到對應行的寬度
                        $(this).children("*:last").after("<div style='outline:#000 solid 1px; position:absolute; left:" + l + "px;top:" + t + "px;width:" + w + "px;'></div>");//4
                    }
                });
            }
        </script>

點擊刪除按鈕效果以下:spa

jQuery代碼（第二次）：code

主要就是修改了line方法裏的內容htm

            $.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("<div style='position:absolute;width:100%;padding-top: 12px;'><div style='outline:#000 solid 1px; width:96%;'></div></div>");//5
                    }
                });

點擊刪除按鈕效果以下:blog

你們有沒有發現，作了一些小改動，不一樣點就在於line方法中加的動態浮動div的形態。從界面顯示可能不太看出來，你們會以爲都差很少啊，並且細心的朋友會發現，第二次的刪除線已經延伸到了表格以外，有些很差看，這塊的修改方法你們能夠把width:100%改爲該表格確切的寬度值，這裏之因此用width:100%是由於以前的項目中用的是一個iframe標籤包着的，用這個屬性，效果要好不少，由於當瀏覽器放大，縮小的時候，這條刪除線會隨着實際狀況拉長和縮短。

固然，第二次的刪除線不僅是在這方面上比第一次的有優點，更重要的是由於，第二次的浮動不依賴於其餘條件。所謂的其餘條件是什麼？好比，由於第一個裏面用到了相對位移的東西，因此若是當含有刪除線的這個table在頁面最初加載時是隱藏狀態的（有可能的，若是tab標籤裏不是第一個）。根本就取不到相對位移的值，這樣就會出錯。

再好比，用js想作一個打印頁面的功能時，你須要讀取原頁面的html元素，把其放在打印窗口中，可是此時的刪除線的相對位移就不是針對打印窗口而言了，因此基本也都會出錯。

而第二次的刪除線就徹底不用考慮相對位移的問題了，當其插入每一行表格的第一列以後，絕對定位，脫離原來的文檔流，調整一下上內邊距，就有一個元素塊在這一行上，而後裏面包一個「線」就OK了。

這裏其實css的東西是關鍵點，主要也不是專業寫這些的，因此費了點勁，經過文章來記錄一下。

DEMO下載地址：http://files.cnblogs.com/zhouhongyu1989/%E5%88%A0%E9%99%A4%E7%BA%BFDemo.rar