鼠标悬停多个 td rowspan

问题描述 投票：0回答：5

我的桌子上有多个

td rowspan
。鼠标悬停时，整个字母表行应变为红色。例如，如果我们将鼠标放在任何字母值上，则整个字母部分应显示为红色。数字也同样如此。

我尝试了一些 jQuery 来实现这一点，但无法获得整行相同颜色的字母或数字。

$("td").hover(function() {
  $el = $(this);
  $el.parent().addClass("hover");

  if ($el.parent().has('td[rowspan]').length == 0) {
    $el
      .parent()
      .prevAll('tr:has(td[rowspan]):first')
      .find('td[rowspan]')
      .addClass("hover");
  }
}, function() {
  $el
    .parent()
    .removeClass("hover")
    .prevAll('tr:has(td[rowspan]):first')
    .find('td[rowspan]')
    .removeClass("hover");
});
body {
  padding: 50px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  padding: 20px;
  border: 1px solid black;
}

.hover {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td rowspan="3">Alphabet</td>
      <td rowspan="2">a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>f</td>
      <td>g</td>
      <td>h</td>
    </tr>
    <tr>
      <td rowspan="3">Number</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

我们该如何解决这个问题？

jquery html css
5个回答
8
投票

编辑：添加了一种查找每个块顶部的方法。

编辑2 - 预先做好艰苦的工作再次考虑这一点，最好在开始时计算出每个块中有哪些行，并将该列表与每行一起存储，例如每个字母表行存储对包含第 1-4 行的数组的引用。因此，当您悬停时，您只需要获取存储在父行中的行数组并将该类应用于这些行。

通过检查块顶行的最大行跨度，您不仅限于检查第一个单元格。在更新的代码中，我已将 Alphabet 移至中间来演示这一点，并添加了几个其他块来演示单行块的工作。

function findBlocks(theTable) {
    if ($(theTable).data('hasblockrows') == null) {
        console.log('findBlocks'); // to prove we only run this once

        // we will loop through the rows but skip the ones not in a block
        var rows = $(theTable).find('tr');
        for (var i = 0; i < rows.length;) {

            var firstRow = rows[i];

            // find max rowspan in this row - this represents the size of the block
            var maxRowspan = 1;
            $(firstRow).find('td').each(function () {
                var attr = parseInt($(this).attr('rowspan') || '1', 10)
                if (attr > maxRowspan) maxRowspan = attr;
            });

            // set to the index in rows we want to go up to
            maxRowspan += i;

            // build up an array and store with each row in this block
            // this is still memory-efficient, as we are just storing a pointer to the same array
            // ... which is also nice becuase we can build the array up in the same loop
            var blockRows = [];
            for (; i < maxRowspan; i++) {
                $(rows[i]).data('blockrows', blockRows);
                blockRows.push(rows[i]);
            }

            // i is now the start of the next block
        }

        // set data against table so we know it has been inited (for if we call it in the hover event)
        $(theTable).data('hasblockrows', 1);
    }
}

$("td").hover(function () {
    $el = $(this);
    //findBlocks($el.closest('table')); // you can call it here or onload as below
    $.each($el.parent().data('blockrows'), function () {
        $(this).find('td').addClass('hover');
    });
}, function () {
    $el = $(this);
    $.each($el.parent().data('blockrows'), function () {
        $(this).find('td').removeClass('hover');
    });
});

findBlocks($('table'));
body {
    padding: 50px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td, th {
    padding: 20px;
    border: 1px solid black;
}
.hover {
    background: red;
}
<table>
    <tbody>
        <tr>
            <td>Symbols</td>
            <td>+</td>
            <td>-</td>
            <td>*</td>
        </tr>
        <tr>
            <td rowspan="2">a</td>
            <td>b</td>
            <td rowspan="4">Alphabet</td>
            <td>c</td>
        </tr>
        <tr>
            <td>d</td>
            <td>e</td>
        </tr>
        <tr>
            <td rowspan="2">f</td>
            <td>g</td>
            <td>h</td>
        </tr>
        <tr>
            <td>i</td>
            <td>j</td>
        </tr>
        <tr>
            <td>Bitwise</td>
            <td>&amp;</td>
            <td>|</td>
            <td>^</td>
        </tr>
        <tr>
            <td rowspan="3">Number</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

2
投票

试试这个

        $(function () {
        $("td").hover(function () {
            $el = $(this);
            $el.parent().addClass("hover");
            var tdIndex = $('tr').index($el.parent());
            if ($el.parent().has('td[rowspan]').length == 0) {
                $el.parent().prevAll('tr:has(td[rowspan]):first')
                        .find('td[rowspan]').filter(function () {
                            return checkRowSpan(this, tdIndex);
                        }).addClass("hover");
            }
        }, function () {
            $el.parent()
    .removeClass("hover")
    .prevAll('tr:has(td[rowspan]):first')
    .find('td[rowspan]')
    .removeClass("hover");

        });
    });
    function checkRowSpan(element, pIndex) {
        var rowSpan = parseInt($(element).attr('rowspan'));
        var cIndex = $('tr').index($(element).parent());
        return rowSpan >= pIndex + 1 || (cIndex + rowSpan) > pIndex;
    }

提琴手在这里

1
投票

您的表结构是不规则的，因此很难找到一个选择器来选择视觉“行”，因为它跨越不同的行。一种解决方案是手动给单元格着色，看看 http://jsfiddle.net/2szxsfcs/2/

基本上，您可以使用相同的 id 标记要一起着色的行，然后使用 jquery 对所有相关的 TR 进行着色/取消着色：

<table>
  <tbody>
        <tr class="fullrow row1" data-id="1">
            <td rowspan="3">Alphabet</td>
            <td rowspan="2">a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr  class="fullrow row1" data-id="1">
            <td>d</td>
            <td>e</td>          
        </tr>
        <tr class="fullrow row1" data-id="1">
            <td>f</td>
            <td>g</td>
            <td>h</td>
        </tr>
        <tr class="fullrow row2" data-id="2">
            <td rowspan="3">Number</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr class="fullrow row2" data-id="2">
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr class="fullrow row2" data-id="2">
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>   
    </tbody>
</table>

和

  $(".fullrow")
    .hover(function() {
        var id=this.getAttribute("data-id");
        // on hover, we get an "id", and all tr's that have class "row<id>" are the ones to color
        $(".row"+id).addClass("hovering"); 
    })
    .on ("blur mouseleave", function() {
      var id=this.getAttribute("data-id");
      $(".row"+id).removeClass("hovering"); 
    });

和

.hovering { background-color:red; }
0
投票

让我试试

的方法。这解决了几个问题，但又出现了新的问题。

在这里摆弄：http://jsfiddle.net/cforcloud/3wj20bmL/
注意：这使用引导网格系统

它需要很少的 jquery 来查找内容单元格。没有子元素的 div 会变成 .cell

$('.row div').filter(function () {
    return $(this).children().length == 0;
})
    .addClass('cell')
    .hover(

function () {
    $(this).parent('.row')
        .addClass('sele');


}, function () {});

TR:hover{  outline:1px solid blue; } ... is possible solution.

这是我对 ROWSPAN 表的方法：

https://jsfiddle.net/mzvarik/8xkrg10p/

function initRowspanHovering()
{
  // searches all tables with ROWSPAN
    $('TABLE').has('TD[rowspan]').each(function(){
      var table = $(this);
      var positions = [];
      var tds = $(this).find('TD');
      tds.each(function(){
          var td = $(this);
          var y = td.offset().top;
          positions[positions.length] = [y, y+td.outerHeight()];
      });
      $(document).on('mousemove', table, function(e){
        // we need to find neighbours
        for (var i=0; i<positions.length; i++) {
          if (positions[i][0] <= e.pageY && positions[i][1] >= e.pageY) {
            tds.eq(i).addClass('tdhover');
          } else {
            tds.eq(i).removeClass('tdhover');
          }
        }
      }).on('mouseout', table, function(){
        tds.removeClass('tdhover');
      });
   });
}

initRowspanHovering();
TR TD:hover,
.tdhover{
  background:#ffffaa;
}
TD{
  padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table border="1" cellspacing="0" cellpadding="5" data-js-hovering>
<tr>
  <td rowspan="5">mouse here will still light up correct Y-axis columns</td>
  <td>aaa</td>
  <td>bbb</td>
  <td>ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td rowspan="2">yyyyy</td>
  <td>ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td>ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td>bbb</td>
  <td>ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td>bbb</td>
  <td>ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td>aaa</td>
  <td>aaa</td>
  <td>aaa</td>
</tr>
</table>

<h2>
Another one
</h2>
<table border="1" cellspacing="0" cellpadding="5" data-js-hovering>
<tr>
  <td rowspan="2">mouse here will still light up correct Y-axis columns</td>
  <td>aaa</td>
  <td>bbb</td>
  <td rowspan="2">ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td>yyyyy</td>
</tr>
</table>
0
投票
TR:hover{  outline:1px solid blue; } ... is possible solution.

这是我对 ROWSPAN 表的方法：

https://jsfiddle.net/mzvarik/8xkrg10p/

function initRowspanHovering()
{
  // searches all tables with ROWSPAN
    $('TABLE').has('TD[rowspan]').each(function(){
      var table = $(this);
      var positions = [];
      var tds = $(this).find('TD');
      tds.each(function(){
          var td = $(this);
          var y = td.offset().top;
          positions[positions.length] = [y, y+td.outerHeight()];
      });
      $(document).on('mousemove', table, function(e){
        // we need to find neighbours
        for (var i=0; i<positions.length; i++) {
          if (positions[i][0] <= e.pageY && positions[i][1] >= e.pageY) {
            tds.eq(i).addClass('tdhover');
          } else {
            tds.eq(i).removeClass('tdhover');
          }
        }
      }).on('mouseout', table, function(){
        tds.removeClass('tdhover');
      });
   });
}

initRowspanHovering();
TR TD:hover,
.tdhover{
  background:#ffffaa;
}
TD{
  padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table border="1" cellspacing="0" cellpadding="5" data-js-hovering>
<tr>
  <td rowspan="5">mouse here will still light up correct Y-axis columns</td>
  <td>aaa</td>
  <td>bbb</td>
  <td>ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td rowspan="2">yyyyy</td>
  <td>ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td>ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td>bbb</td>
  <td>ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td>bbb</td>
  <td>ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td>aaa</td>
  <td>aaa</td>
  <td>aaa</td>
</tr>
</table>

<h2>
Another one
</h2>
<table border="1" cellspacing="0" cellpadding="5" data-js-hovering>
<tr>
  <td rowspan="2">mouse here will still light up correct Y-axis columns</td>
  <td>aaa</td>
  <td>bbb</td>
  <td rowspan="2">ccc</td>
</tr>
<tr>
  <td>aaa</td>
  <td>yyyyy</td>
</tr>
</table>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.