0

我需要关于的解决方案

  1. 当我们在特定单元格索引上选择鼠标时(like A5)，它将highlighted带有标题。
  2. 从那cell(A5）如果我们在其他单元格上使用鼠标药物，它也会被突出显示（如 A5 到 D5 所有单元格）及其标题（如行标题 1、2、3... 和列标题 A、B、....）。

有什么解决办法吗？

第一次尝试：

        $('#Mytable ').on( "click","td",function() {

        $("td").removeClass("highlighted");
        $(this).addClass("highlighted").siblings().removeClass('highlighted');
        $("th").removeClass("highlighte");
        $(this).parent().find("th").addClass("highlighte");
        var t = $('#Mytable th').eq($(this).index());
        var ad= t.text();
        $('th#'+ad).addClass("highlighte");

        } );

CSS：

   .highlighted {
     border: 2px solid #0080FF ;
    }
   .highlighte {

    background-color: #808080 ;
    }

尝试第二次：

         $(window).load(function() {
         //alert('tanim');
         var isMouseDown = false;
         $("#Mytable td")
             .mousedown(function () {
                 isMouseDown = true;
                 $(this).addClass("severalcell-highlight");
                // return false; // prevent text selection
             })
             .mouseover(function () {
                 if (isMouseDown) {
                     $(this).addClass("severalcell-highlight");
                 }
             })
             .mouseup(function () {
                 if (isMouseDown) {
                     $(this).addClass("severalcell-highlight");
                 }
             })
             .bind("selectstart", function () {
                 //return false; // prevent text selection in IE
             });

         $(document)
             .mouseup(function () {
                 isMouseDown = false;

             });
         $('#Mytable').on( "click","td",function() {

             $("td").removeClass("severalcell-highlight");
         } );
     });
4

3 回答 3

1

您可以尝试以下代码：

$(document).ready(function(){
var $tbl = $("#table-1"),
    $tblHead = $("#table-1 thead tr");

   $tbl.children("tbody").find("td")
    .on("mouseover",function(){
        var cellIndex = $(this).index();           
        $(this).css("background-color","#ccc");
        $tblHead.children("th").eq(cellIndex).css("background-color","blue");
    }).on("mouseleave",function(){
        $(this).css("background-color","#fff");
        var cellIndex = $(this).index();   
        $tblHead.children("th").eq(cellIndex).css("background-color","#fff");
    });
});

这里的工作示例：http: //jsfiddle.net/6mGLh/1/

于 2013-08-01T07:15:09.827 回答
0

在不知道表格布局的情况下，也许我可以为您指出以下工具/方法：

  1. colnr通过计算当前的元素（是当前的）来找出你在哪一prevAll()列（Nr ）：tdtrthistdcolnr=$(this).parent().prevAll().length
  2. th通过过滤从同一列中获取标题$('table#name tr:eq(0) th:eq('+colnr+')')
  3. （只需阅读您想要突出显示标题）然后突出显示在 2 下选择的相应标题 ...

看看我稍微编辑的maverickosama的解决方案（将mouseenter和mouseleave事件组合在一个函数中），请参见此处：JSfiddle

有关完整的解决方案，请参阅此帖子！

于 2013-08-01T07:13:57.043 回答
0

我还没有解决你的标题突出问题，但其余的工作。将以下内容放入您的$(document).ready函数中：

mdown=false;
var funcfalse=function(){ console.log('selsta'); }
var hover=function(ev){ if (mdown) $(this).toggleClass('hi_td'); }
var mo=function(ev){
 mdown=(ev.type=='mousedown');
 if (mdown) $(this).toggleClass('hi_td');
 console.log(mdown);}
 var $tbl = $("#table-1"),$tblHead = $("#table-1 thead tr");

$("tbody td",$tbl).on({"mousedown":mo,"mouseup":mo,"mouseenter":hover
                       "selectstart":funcfalse});

JSfiddle

当然，这不是套索选择，意味着选择框。只有那些您实际访问过（悬停在鼠标上）的元素才会被选中或取消选中（在回访时）。

编辑 2

现在明白了！现在您实际上选择了一个框形区域，并且标题也被突出显示（或“突出显示”？！？）！

函数中应包含以下内容$(document).ready：

mdown=false; msel=[[],[]];   // msel=[[startrow,endrow],[startcol,endcolcol2]]
var funcfalse=function(){console.log('selsta');} // disable IE text selection
var getpos=function(o,i){var o=$(o); // get position of current cell               
    msel[0][i]=o.parent().index();   // set row
    msel[1][i]=o.index();            // set column
    return msel;
}
var modsel=function(o){              // utility function to get cell position of o
    var r=getpos(o,1)[0].slice(0);r.sort();
    var c=       msel[1].slice(0);c.sort();
    $trs=$('#table-1 tbody tr');
    $('td',$trs).removeClass('hi_td');
    $trs.slice(r[0],r[1]+1).each(function(){
        $('td',this).slice(c[0],c[1]+1).addClass('hi_td');})
    $("#table-1 thead tr th").removeClass('hi_th')
        .slice(c[0],c[1]+1).addClass('hi_th');
}             
var hover=function(ev){ if (mdown) modsel(this); }       // event function hover
var mo=function(ev){ mdown=(ev.type=='mousedown')?1:0;   // event function mouseuo/down
    getpos(this,1-mdown);
    if (mdown) modsel(this);
}
var $tbl = $("#table-1"),$tblHead = $("#table-1 thead tr");
$("tbody td",$tbl)
    .on({"mousedown":mo,"mouseup":mo,"mouseenter":hover,"selectstart":funcfalse});

JSfiddle

编辑3：（行标题）

在每行中包含前导<th>s 的修改也是可能的。我只是相应地修改了我的旧 JSfiddle。我对这个解决方案还不是很满意，因为它本身不能识别<th>每行中是否实际存在前导。我手动更改了偏移量

    $trs.slice(r[0],r[1]+1).each(function(){
    $('td',this).slice(c[0],c[1]+1).addClass('hi_td');});

至

    $trs.slice(r[0],r[1]+1).each(function(){
    $('td',this).slice(c[0]-1,c[1]).addClass('hi_td');});

也许我很快就会找到更好的解决方案。但是，在这里您可以找到更新的JSfiddle。

编辑 4：（超过 9 列）：

抱歉，我做第一个版本的时候有点懒。r我通过对数组进行排序来确定行号和列号的最小值和最大值c。不幸的是，我只是使用了字母（默认）排序，它假设“9”高于“10”。我刚刚在以下几行中更改了您的 JSfiddle（添加了数字 sort-callback-function numsrt）：

var numsrt=function(a,b){return a-b;}
var r=getpos(o,1)[0].slice(0);r.sort(numsrt);
var c=       msel[1].slice(0);c.sort(numsrt);

现在它也适用于大表：JSfiddle

于 2013-08-01T08:37:56.413 回答