jquery表格獲取行、列

之前接到個任務，要把excel表格放到頁面上，其中有一個需求可以獲得任意單元格所在行和所在列的數據。

我知道去網上搜現成的解決辦法肯定能搜到，但是我想用自己的代碼解決此事。所以解決辦法有些笨拙。

開始做的時候，我給表格添加單元格自動綁定了一個鼠標事件，

  爲什麼是給表格添加單元格自動綁定事件，因爲整個表格的數據都是在頁面加載完後，通過ajax向後臺獲取表格數據，後臺讀取表格並解析成json傳到頁面，頁面接受到json後，再用jquery解析後臺傳過來的表格json數據，再生成表格。這就產生了一個javascript常見問題，dom在文檔加載後創建，javascript獲取不到這個dom所以也就沒法直接綁定dom的事件。爲此，jquery提供了一個on()方法，此方法綁定在要添加節點的父元素上:

$('#rtable').on('mouseenter','td'function(){});

這樣每次向#rtable中添加td都會自動綁定mouseenter事件。

獲取row是很簡單的，但是我在獲取列的時候，第一次用的方法是判斷鼠標在第幾列，然後獲取每一行的這一列。這個方法簡單表沒問題，當我測試複雜表時，因爲單元格寬度有大有小，結構也會有跨單元格的情況，這樣獲取會亂。

然後我想到了，既然獲取列數會亂，所以直接獲取座標。放鼠標移到單元格內時，過去此單元格的橫座標，然後在遍歷所有的單元格，把符合這個座標的挑選出來。

 $("#rtable").on("mouseenter", "td", function () {
                var x = $(this).position().left;
                var y = $(this).position().top;
                $("#show").css("left",x);
                $("#show").css("top",y-55);                
              
                $("#show").show();
                $(".spinner").css("position", "absolute");
                $(".spinner").css("left", $("#show").css("left"));
                $(".spinner").css("top",$("#show").css("top"));
                $(".spinner").show();
                       
                var pojs = [];
                //var indx = $(this).prevAll().length;
                $("#rtable tr td").each(function () {
                    if ($(this).position().left == x) {
                        $(this).css("background-color", "#6fe0ff");
                        var text = $(this).text();
                        if (text != null && !isNaN(text) && text != "") {
                            pojs.push(text);
                        }
                    }
                });
               // $("[id$='." + indx + "']").css("background-color", "#6fe0ff");
              //  $("[id$='." + indx + "']").each(function () {
                   
              //  });
                $.post("table_view_source.ashx",
                    { num: pojs.toString() },
                    function (data) {
                        $(".spinner").hide();
                        $("#show").html(data);
                    });                              
            });

這樣就又面臨了一個新的問題，效率。循環每一個單元格在數量少的情況下可用，但是數量一多就會造成明顯卡頓，甚至崩潰。我在測試的時候幾萬個單元格就有明顯的卡頓。
所以我想這種解決方法肯定是不太完美的，需要換另一種辦法解決。

博主的個人博客：blog.leezw.net