Question

我需要解决方案

当我们在特定单元格索引(like A5)上选择鼠标时，它将是highlighted标题。
从那个cell(A5）如果我们将药物放在其他细胞上，它也会突出显示（如A5到D5所有细胞）及其标题（如行标题1,2,3 ...＆amp;列标题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");
         } );
     });

Answer 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/

Answer 2

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

通过计算colnr中prevAll()当前td的{{1}}元素，找出您所在的列（Nr tr）（this是当前td）：colnr=$(this).parent().prevAll().length
通过th

$('table#name tr:eq(0) th:eq('+colnr+')')

（只是看了你想要突出显示标题）然后在2下选择合适的标题...

看看maverickos的解决方案，我编辑了一点（将mouseenter和mouseleave事件合并到一个函数中），请参见：JSfiddle

有关完整的解决方案，请参阅this post！

Answer 3

我还没有解决你的标题突出问题，但其余的工作。将以下内容放入$(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

当然，这不是一个套索选择，暗示一个选择框。只有那些你实际访问过（moversed）并使用mousedown的元素才会被选中或取消选中（在回访时）。

修改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>的修改。我刚刚修改了我的旧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

使用标题突出显示表格单元格

3 个答案: