Question

所以我试图找出一种最好和最简单的方法来突出表格中的一系列细胞。

＆＃13;

#A1lnk, #B1lnk {cursor: pointer;}

＆＃13;

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

＆＃13;

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

我希望能够点击B1并突出显示其下方的所有单元格，突出显示是容易的部分，实际选择正确的单元格要困难得多。

我将有多个其他小表添加C1，D1，E1，F1，G1，H1等。所以可能会有一些额外但只有两个列。它们将在行中级联，因此仍然是父table的一部分，但我只想找出最佳方法，因为表创建的是行而不是列。< / p>

Answer 1

我试过像你说的那样，但是代码变得很长，这就是为什么我删除了一些行。

＆＃13;

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;

＆＃13;

#A1lnk, #B1lnk, #C1lnk {cursor: pointer;}

td[h] {
    background-color: orange;
    color: #fff;
}

＆＃13;

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

＆＃13;

希望，这应该适合你。

Answer 2

您应该使用标题类来代替不同的id。然后点击标题获取它的索引。使用此索引，您可以使用nextUntil()方法和:nth-child伪选择器轻松选择其下方的单元格，并将其突出显示如下。

＆＃13;

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

＆＃13;

.header {
    cursor: pointer;
}

.highlight {
    background-color: green;
}

＆＃13;

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

＆＃13;

突出显示表

2 个答案: