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