Javascript 突出显示带有标题的表格单元格

我需要解决这个问题

当我们在特定的单元格索引（如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:

第二次尝试：

         $(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");
         } );
     });

---

在不了解表格布局的情况下，我可以向您指出以下工具/方法：

通过计算该tr中当前td的prevAll元素，找出您所在的列Nr colnr。这是当前td:colnr=$this.parent.prevAll.length 通过使用$'tablename tr:eq0 th:eq'+colnr对同一列的第th行进行过滤，从第th行获取标题+ 只需阅读你想要突出显示标题，然后突出显示在2下选择的适当标题th。。。 只要看看maverickosama的解决方案，我将mouseenter和mouseleave事件组合在一个函数中编辑了一点，请参见这里：

---

有关完整的解决方案，请参见

您可以尝试以下代码：

$(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");
    });
});

---

这里的工作示例：

我还没有解决标题突出显示问题，但其余的都可以。将以下内容放入$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});

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});

当然，这不是套索选择，而是一个选择框。回访时，仅会选择或取消选择鼠标向下悬停在您实际访问过的元素

编辑2

明白了！现在您实际上选择了一个长方体区域，并且标题也高亮显示或“Highlight”

$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});

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});

编辑3：行标题

也可以修改为在每行中包含前导字符。我只是相应地修改了我的旧JSFIDLE。我对这个解决方案还不是很满意，因为它本身并不能识别每一行中是否有一位领先者。我手动更改了与的偏移量

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

到

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

编辑4：超过9列：

对不起，我做第一个版本的时候有点懒。我通过对数组r和c排序来确定行数和列数的最小值和最大值。不幸的是，我只是使用了字母默认排序，它假设“9”高于“10”。我刚刚在以下几行中更改了JSFIDLE，添加了数字排序回调函数numsrt：

---

现在它也适用于大型表：

以及您尝试过的内容？嘿，请提交您的代码，我们将尝试从中提供帮助您的标志变量isMouseDown是在$window.load函数中用var声明的，因此仅在该函数执行期间有效。然后，当用户触发事件函数时，变量超出范围。因为您将其用作全局变量，所以应该声明它而不使用var。感谢您的注释cars10.Thnx对于这个示例，我一直错误地认为index返回了jQuery集合中元素的总索引位置，但是，正如您所演示的，它返回其父DOM结构中的位置。请参见下面->maverickosama:index看起来比prevAll优雅得多！如果我们添加行标题，如第1行、第2行、第3行等，并希望像列标题一样高亮显示。使用上述方法是否可行？它可能有效。但是如果表有许多行和列，如：。第9列和第10列不在一起工作。它适用于大型表。如果要为选定的高亮显示的行和列创建边框，并创建对行和列的拖动选项，以增加对行和列的高亮显示。是否可以使用上述方法？

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);