文章/答案/技术大牛

发布

问突出显示表
EN

Stack Overflow用户

提问于 2016-12-10 18:52:21

回答 2查看 124关注 0票数 1

所以我想找出最简单最好的方法来突出显示表格中的细胞。

#A1lnk, #B1lnk {cursor: pointer;}

<table border="1">
  <tr>
    <th colspan="2"><a id='A1lnk'>A1</a></th><th colspan="2"><a id='B1lnk'>B1</a></th>
  </tr>
  <tr>
    <td>A1-1</td><td>A1-2</td><td>B1-1</td><td>B1-2</td>
  </tr>
  <tr>
    <td>A1-3</td><td>A1-4</td><td>B1-3</td><td>B1-4</td>
  </tr>
  <tr>
    <td>A1-5</td><td>A1-6</td><td>B1-5</td><td>B1-6</td>
  </tr>
  <tr>
    <th colspan="2"><a id='C1lnk'>C1</a></th><th colspan="2"><a id='D1lnk'>D1</a></th>
  </tr>
  <tr>
    <td>C1-1</td><td>C1-2</td><td>D1-1</td><td>D1-2</td>
  </tr>
  <tr>
    <td>C1-3</td><td>C1-4</td><td>D1-3</td><td>D1-4</td>
  </tr>
  <tr>
    <td>C1-5</td><td>C1-6</td><td>D1-5</td><td>D1-6</td>
  </tr>
  <tr>
    <th colspan="2"><a id='E1lnk'>E1</a></th><th colspan="2"><a id='F1lnk'>F1</a></th>
  </tr>
  <tr>
    <td>E1-1</td><td>E1-2</td><td>F1-1</td><td>F1-2</td>
  </tr>
  <tr>
    <td>E1-3</td><td>E1-4</td><td>F1-3</td><td>F1-4</td>
  </tr>
  <tr>
    <td>E1-5</td><td>E1-6</td><td>F1-5</td><td>F1-6</td>
  </tr>
</table>

您可以看到本质上是有两列，A1和B1。内容非常简单，但可以说，实际内容不会那么简单。

我想要能够点击B1和它下面的所有单元格高亮显示，高光是容易的部分，实际上选择正确的单元格要困难得多。

我将有多个其他小型表，添加C1、D1、E1、F1、G1、H1等。因此，可能会有几个额外的表，但只有在两个列中才有。它们将层叠在行中，因此仍然是父table的一部分，但我只是想找出最好的方法，因为表是按行而不是列创建的。

javascript

php

jquery

html

css

回答 2

Stack Overflow用户

发布于 2016-12-10 19:09:03

我尝试了一些您说过的东西，但是代码执行的时间很长，这就是为什么我删除了一些行。

var a1lnk = document.getElementById('A1lnk');
var a2lnk = document.getElementById('B1lnk');
var a3lnk = document.getElementById('C1lnk');

var a1 = document.getElementById('a1');
var a2 = document.getElementById('a2');

var c1 = document.getElementById('c1');
var c2 = document.getElementById('c2');

function unhighlight () {
    b1.removeAttribute('h');
    b2.removeAttribute('h');
    a1.removeAttribute('h');
    a2.removeAttribute('h');
    c1.removeAttribute('h');
    c2.removeAttribute('h');

}

var b1 = document.getElementById('b1');
var b2 = document.getElementById('b2');



function highlightA () {
    unhighlight();
    a1.setAttribute('h', true);
    a2.setAttribute('h', true);
}
function highlightB () {
    unhighlight();
    b1.setAttribute('h', true);
    b2.setAttribute('h', true);
}
function highlightC () {
    unhighlight();
    c1.setAttribute('h', true);
    c2.setAttribute('h', true);
}

a1lnk.onclick = highlightA;
a2lnk.onclick = highlightB;
a3lnk.onclick = highlightC;

#A1lnk, #B1lnk, #C1lnk {cursor: pointer;}

td[h] {
    background-color: orange;
    color: #fff;
}

<table border="1">
  <tr>
    <th colspan="2"><a id='A1lnk'>A1</a></th><th colspan="2"><a id='B1lnk'>B1</a></th>
  </tr>
  <tr>
    <td id="a1">A1-1</td><td id="a2">A1-2</td><td id="b1">B1-1</td><td id="b2">B1-2</td>
  </tr>
  <tr>
       <th colspan="2"><a id='C1lnk'>C1</a></th>
  </tr>
  <tr>
       <td id="c1">C1-1</td><td id="c2">C1-2</td>
  </tr>
</table>

霍普，这应该对你有用。

票数 1

Stack Overflow用户

发布于 2016-12-10 19:19:40

您应该使用一个类作为标题，而不是使用不同的id。然后单击header，获取它的索引。使用此索引，您可以使用nextUntil()方法和:nth-child伪选择器轻松地选择下面的单元格，并将它们突出显示如下。

$('.header').click(function() {
    var index = $(this).parent().index(),
        a = index * 2 + 1,
        b = a + 1;

    $('.highlight').removeClass('highlight');

    var tr = $(this).closest('tr').nextUntil(':has(th)')

    tr.find('td:nth-child(' + a + '), td:nth-child(' + b + ')').addClass('highlight');
});

.header {
    cursor: pointer;
}

.highlight {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
    <tr>
        <th colspan="2"><a class="header">A1</a></th>
        <th colspan="2"><a class="header">B1</a></th>
    </tr>
    <tr>
        <td>A1-1</td>
        <td>A1-2</td>
        <td>B1-1</td>
        <td>B1-2</td>
    </tr>
    <tr>
        <td>A1-3</td>
        <td>A1-4</td>
        <td>B1-3</td>
        <td>B1-4</td>
    </tr>
    <tr>
        <td>A1-5</td>
        <td>A1-6</td>
        <td>B1-5</td>
        <td>B1-6</td>
    </tr>
    <tr>
        <th colspan="2"><a class="header">C1</a></th>
        <th colspan="2"><a class="header">D1</a></th>
    </tr>
    <tr>
        <td>C1-1</td>
        <td>C1-2</td>
        <td>D1-1</td>
        <td>D1-2</td>
    </tr>
    <tr>
        <td>C1-3</td>
        <td>C1-4</td>
        <td>D1-3</td>
        <td>D1-4</td>
    </tr>
    <tr>
        <td>C1-5</td>
        <td>C1-6</td>
        <td>D1-5</td>
        <td>D1-6</td>
    </tr>
    <tr>
        <th colspan="2"><a class="header">E1</a></th>
        <th colspan="2"><a class="header">F1</a></th>
    </tr>
    <tr>
        <td>E1-1</td>
        <td>E1-2</td>
        <td>F1-1</td>
        <td>F1-2</td>
    </tr>
    <tr>
        <td>E1-3</td>
        <td>E1-4</td>
        <td>F1-3</td>
        <td>F1-4</td>
    </tr>
    <tr>
        <td>E1-5</td>
        <td>E1-6</td>
        <td>F1-5</td>
        <td>F1-6</td>
    </tr>
</table>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41079102

复制

相似问题

问突出显示表
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问突出显示表EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问突出显示表
EN