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