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

我想突出显示表细胞时，鼠标药物对该细胞。我真的很想做 1.当鼠标移动到表格单元格上时，该单元格由边框高亮显示。 2.突出显示哪些单元格该单元格的标题也将突出显示。 我该怎么做？ 多谢各位

<script type="text/javascript">
     $(window).load(function() {
     $(function () {
         $("#Mytable td")
             .mousedown(rangeMouseDown)
             .mouseup(rangeMouseUp)
             .mousemove(rangeMouseMove);
     });

     var dragStart = 0;
     var dragEnd = 0;
     var isDragging = false;

     function rangeMouseDown(e) {
         if (isRightClick(e)) {
             return false;
         } else {
             var allCells = $("#Mytable td");
             dragStart = allCells.index($(this));
             isDragging = true;

             if (typeof e.preventDefault != 'undefined') { e.preventDefault(); }
             document.documentElement.onselectstart = function () { return false; };
         }
     }

     function rangeMouseUp(e) {
         if (isRightClick(e)) {
             return false;
         } else {
             var allCells = $("#Mytable td");
             dragEnd = allCells.index($(this));

             isDragging = false;
             if (dragEnd != 0) {
                 selectRange();
             }

             document.documentElement.onselectstart = function () { return true; };
         }
     }

     function rangeMouseMove(e) {
         if (isDragging) {
             var allCells = $("#Mytable td");
             dragEnd = allCells.index($(this));
             selectRange();
         }
     }

     function selectRange() {
         $("#Mytable td").removeClass('selected');
         if (dragEnd + 1 < dragStart) { // reverse select
             $("#Mytable td").slice(dragEnd, dragStart + 1).addClass('highlighte');
         } else {
             $("#Mytable td").slice(dragStart, dragEnd + 1).addClass('highlighte');
         }
     }

     function isRightClick(e) {
         if (e.which) {
             return (e.which == 3);
         } else if (e.button) {
             return (e.button == 2);
         }
         return false;
     }
     });
 </script>

$（窗口）。加载（函数（）{
$（函数（）{
$（“Mytable td”）
.mousedown（rangeMouseDown）
.mouseup（rangeMouseUp）
.mousemove（rangeMouseMove）；
});
var dragStart=0；
var-dragEnd=0；
var IsDraging=错误；
函数范围mousedown（e）{
如果（单击鼠标右键（e））{
返回false；
}否则{
var-allCells=$（“#Mytable td”）；
dragStart=allCells.index（$（this））；
IsDraging=true；
if（typeof e.preventDefault！=“undefined”）{e.preventDefault（）；}
document.documentElement.onselectstart=函数（）{return false；}；
}
}
函数rangeMouseUp（e）{
如果（单击鼠标右键（e））{
返回false；
}否则{
var-allCells=$（“#Mytable td”）；
dragEnd=allCells.index（$（this））；
IsDraging=错误；
如果（dragEnd！=0）{
选择范围（）；
}
document.documentElement.onselectstart=函数（）{return true；}；
}
}
函数rangeMouseMove（e）{
if（ISDRAGING）{
var-allCells=$（“#Mytable td”）；
dragEnd=allCells.index（$（this））；
选择范围（）；
}
}
函数selectRange（）{
$（“#Mytable td”）.removeClass（'selected'）；
如果（dragEnd+1

您的代码中似乎已经有了需求1，要突出显示标题，您可以将其添加到

selectRange（）

函数中，以获取所选单元格的索引，并将类添加到相应的标题中：

function selectRange() {
    $("#Mytable td").removeClass('selected');
    if (dragEnd + 1 < dragStart) { // reverse select
       var tds = $("#Mytable td").slice(dragEnd, dragStart + 1).addClass('highlighted');
    } else {
       var tds = $("#Mytable td").slice(dragStart, dragEnd + 1).addClass('highlighted');
    }
    tds.each(function(){
        $('#Mytable th').eq($(this).index()).addClass('highlighted');
    });    
 }

函数selectRange（）{
$（“#Mytable td”）.removeClass（'selected'）；
如果（dragEnd+1

---

更严肃地说，您是否可以编辑您的问题，以显示您现有的html（或它的合理示例）以及您已经尝试过的任何JavaScript？在这里，我们可以看到每个选定的单元格都有四边形边框。如果我需要总选择有一个四边形边框，这意味着如果我从第2行和第3行中选择了5个单元格，那么在第2行和第3行周围只有一个四边形边框，有5个单元格。那我该怎么办？