如何通过单击另一个表的列来取消突出显示表的行？

时间：2019-02-19 05:43:28

标签： jquery

有两个表（例如表A和表B）。表B中的每一列对应于表A中的特定行。 我的目标是： （1）具有链接的两个表，因此当我单击表B中的特定列时，将仅突出显示表A中其对应的行。 （2）当我再次单击表B中的同一列时，表A中的相应行将被联合国突出显示。

我已经完成了我的第一个目标。但是，当我再次单击表B中的同一列时，表A中的相应行似乎没有被取消突出显示。

我试图弄清楚为什么它不能按我想要的方式工作，我认为问题出在“ var selected = $（this）.parent（）。find（'td'）。eq（column_index + 1）.hasClass（“ highlight”）;“。我怎样才能解决这个问题？谢谢。下面是使用jQuery的代码：

$("#dataTable tr td").click(function() {
  var column_index = $(this).index();
  $("#myTable tr ").each(function(i, tr) {
    var selected = $(this).parent().find('td').eq(column_index + 1).hasClass("highlight");
    $(this).parent().find('tr').not(column_index + 1).removeClass("highlight");
    if (!selected)
      $(this).parent().find('tr').eq(column_index + 1).addClass("highlight");
  });
});
.highlight{
  background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table id="myTable" class="gridview table-bordered text-center" style="width: 4.5in; margin: auto; float: left">
    <tr>
      <th colspan="1" rowspan="1"></th>
      <th colspan="7">Player 1</th>
    </tr>
    <tr>
      <th rowspan="7" style='padding-top: 0px'>
        <div class="vertical-text">
          <div class="vertical-text__inner">Player 2</div>
        </div>
      </th>
      <th></th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
      <th>f</th>
    </tr>
    <tr>
      <th height="65">A</th>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <th height="65">B</th>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <th height="65">C</th>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
    <tr>
      <th height="65">D</th>
      <td>19</td>
      <td>20</td>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
    </tr>
    <tr>
      <th height="65">E</th>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
      <td>29</td>
      <td>30</td>
    </tr>
    <tr>
      <th height="65">F</th>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td>35</td>
      <td>36</td>
    </tr>
  </table>



  <table id="dataTable" class="gridview1 table-bordered text-center" style="width: 4.5in; margin: auto">
    <tr>
      <th colspan="1" rowspan="1"></th>
      <th colspan="7">Player 2</th>
    </tr>
    <tr>

      <th rowspan="7" style='padding-top: 110px'>
        <div class="vertical-text">
          <div class="vertical-text__inner">Player 1</div>
        </div>
      </th>
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
    </tr>
    <tr>
      <th height="65">a</th>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <th height="65">b</th>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <th height="65">c</th>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
    <tr>
      <th height="65">d</th>
      <td>19</td>
      <td>20</td>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
    </tr>
    <tr>
      <th height="65">e</th>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
      <td>29</td>
      <td>30</td>
    </tr>
    <tr>
      <th height="65">f</th>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td>35</td>
      <td>36</td>
    </tr>
  </table>
</div>

1 个答案:

答案 0 :(得分：0)

尝试下面的代码-

首先，当单击列值时，您需要获取其row的索引，然后在第一张表中选择该行并将其切换为突出显示。 

$("#dataTable tr td").click(function() {
  var column_index = $(this).closest('tr').index();
  $("#myTable tr:eq(" + column_index + ")").toggleClass('highlight');
});
.highlight {
  background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table id="myTable" class="gridview table-bordered text-center" style="width: 4.5in; margin: auto; float: left">
    <tr>
      <th colspan="1" rowspan="1"></th>
      <th colspan="7">Player 1</th>
    </tr>
    <tr>
      <th rowspan="7" style='padding-top: 0px'>
        <div class="vertical-text">
          <div class="vertical-text__inner">Player 2</div>
        </div>
      </th>
      <th></th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
      <th>f</th>
    </tr>
    <tr>
      <th height="65">A</th>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <th height="65">B</th>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <th height="65">C</th>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
    <tr>
      <th height="65">D</th>
      <td>19</td>
      <td>20</td>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
    </tr>
    <tr>
      <th height="65">E</th>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
      <td>29</td>
      <td>30</td>
    </tr>
    <tr>
      <th height="65">F</th>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td>35</td>
      <td>36</td>
    </tr>
  </table>



  <table id="dataTable" class="gridview1 table-bordered text-center" style="width: 4.5in; margin: auto">
    <tr>
      <th colspan="1" rowspan="1"></th>
      <th colspan="7">Player 2</th>
    </tr>
    <tr>

      <th rowspan="7" style='padding-top: 110px'>
        <div class="vertical-text">
          <div class="vertical-text__inner">Player 1</div>
        </div>
      </th>
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
    </tr>
    <tr>
      <th height="65">a</th>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <th height="65">b</th>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <th height="65">c</th>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
    <tr>
      <th height="65">d</th>
      <td>19</td>
      <td>20</td>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
    </tr>
    <tr>
      <th height="65">e</th>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
      <td>29</td>
      <td>30</td>
    </tr>
    <tr>
      <th height="65">f</th>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td>35</td>
      <td>36</td>
    </tr>
  </table>
</div>

相关问题
最新问题