鼠標懸停在多個td rowspan上

[英]mouse hover with multiple td rowspan


I have a table with multiple td rowspan. On mouse hover the entire alphabet row should come in red colour. For example, if we keep the mouse on any alphabet value the entire alphabet section should appear red. Same case for numbers also.

我有一個有多個td rowspan的表。鼠標懸停時,整個字母行應為紅色。例如,如果我們將鼠標放在任何字母值上,則整個字母表部分應顯示為紅色。數字的情況也是如此。

Had some jQuery to achieve this but couldn't get the entire row of alphabet or numbers in same colour. Try this: http://jsfiddle.net/y3q2bs85/6/

有一些jQuery實現這一點,但無法得到相同顏色的整行字母或數字。試試這個:http://jsfiddle.net/y3q2bs85/6/

HTML code:

HTML代碼:

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

CSS code:

CSS代碼:

body {
    padding: 50px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td, th {
    padding: 20px;
    border: 1px solid black;
}
.hover {
    background: red;
}

jQuery code:

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

});

How can we solve this?

我們怎么解決這個問題?

4 个解决方案

#1


6  

EDIT: Added a way to find the top of each block.

編輯:添加了一種查找每個塊頂部的方法。

EDIT 2 - Do the hard work up front Thinking about this again, it is better to just work out at the start which rows are in each block and store that list with each row, e.g. each alphabet row stores a reference to an array containing rows 1-4. So when you hover, you just need to get the array of rows stored in the parent row and apply the class to those.

編輯2 - 事先做好工作再考慮一下這個問題,最好在開始時解決每個塊中的行,並將每個行存儲在列表中,例如:每個字母行存儲對包含行1-4的數組的引用。因此,當您懸停時,您只需要獲取存儲在父行中的行數組並將類應用於這些行。

By checking the maximum rowspan in the top row of the block, you aren't restricted to just checking the first cell. In the updated code, I have moved Alphabet to the middle to demonstrate this and add a couple of other blocks to demonstrate single row blocks work.

通過檢查塊頂行中的最大行距,您不僅可以檢查第一個單元格。在更新的代碼中,我已將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


2  

Try this

嘗試這個

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

Fiddler here

提琴手在這里

#3


1  

Your table structure is irregular, so it's very hard to find a selector that will select the visual "row", as it spans different rows. One solution is to color the cells by hand, take a look at http://jsfiddle.net/2szxsfcs/2/

您的表結構是不規則的,因此很難找到一個選擇器來選擇視覺“行”,因為它跨越不同的行。一種解決方案是手工着色細胞,看看http://jsfiddle.net/2szxsfcs/2/

Basically you tag the rows that are meant to be colored together with the same id, then using jquery you color / uncolor all related TR's:

基本上你用相同的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>

and

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

and

.hovering { background-color:red; }

#4


0  

Let me try the <div> way. This solves several problems, but new ones araise.

讓我試試

方式。這解決了幾個問題,但新的問題。

fiddle here: http://jsfiddle.net/cforcloud/3wj20bmL/
Note: this uses bootstrap grid system

這里小提琴:http://jsfiddle.net/cforcloud/3wj20bmL/注意:這使用bootstrap網格系統

Its needs little jquery to find the content cells. divs which have no children become .cell

找到內容單元需要很少的jquery。沒有孩子的div成為.cell

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

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


}, function () {});

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/10/10/712c8db60f15b4beadaea76c61bf597a.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com