使用包含行和列跨度的表突出显示单击事件

时间：2014-12-03 12:15:12

标签： javascript jquery html css

我有一张表格如下：

+-----------------------------------------------------------+
|         |   H1    |   H2    |   H3    |   H4    |   H5    |
|         |         |         |         |         |         |          
+-----------------------------------------------------------+
|         |    |    |    |    |    |    |    |    |    |    |
+-----------------------------------------------------------+
|         |         |         |         |         |         |
|    S1   |-------------------------------------------------+
|         |         |         |         |         |         |
+-----------------------------------------------------------+
|         |         |         |         |         |         |
|    S2   |-------------------------------------------------+
|         |         |         |         |         |         |
+-----------------------------------------------------------+
|         |         |         |         |         |         |
|    S3   |-------------------------------------------------+
|         |         |         |         |         |         |
+-----------------------------------------------------------+

我想帮助实施一种方法来按下任何S1，2或3单元格（其中row span）所有'兄弟姐妹'将会是突出显示，很像：

+-----------------------------------------------------------+
|         |XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|
|    S3   |-------------------------------------------------+
|         |XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|
+-----------------------------------------------------------+
    ^
    |
  CLICKED HERE

如果可能的话，我还想对我的H1 -> H5列进行此操作。

我在看this，但是javascript / jquery并不是很好，我无法改变它，只能能够“打破”它当前的功能。

警告：由于表

的复杂性，代码长 

$(document).ready(function() {
  $('.custTitle').click(function() {
    $(this).find('td').css("background-color", "red");
  });
});
.makeInputWidth {
  width: 5em;
}
.rotateText {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  height: 7em;
  width: 6em;
}
.title {
  background-color: #808080;
}
table tr td {
  padding: 0;
}
table tr {
  padding: 0;
  border: 0;
}
/*  .qwerty{
        background-color:transparent;
        border: 1px solid transparent;
    }*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="thistable">
  <tr>
    <th>LOCATION</th>
    <th>&nbsp;&nbsp;</th>
    <th colspan="2">H1</th>
    <th colspan="3">H2</th>
    <th>H3</th>
    <th colspan="2">H4</th>
    <th></th>
  </tr>
  <tr>
    <th>PRODUCT</th>
    <th>&nbsp;&nbsp;</th>
    <th class="rotateText">S1</th>
    <th class="rotateText">S2</th>
    <th class="rotateText">S3</th>
    <th class="rotateText">S4</th>
    <th class="rotateText">S5</th>
    <th class="rotateText">S6</th>
    <th class="rotateText">S7</th>
    <th class="rotateText">S8</th>
    <th></th>
  </tr>
  <tr>
    <th>Product id</th>
    <th>&nbsp;&nbsp;</th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>
    <th>7</th>
    <th>8</th>
    <th></th>
  </tr>
  <tr>
    <th colspan="11">&nbsp;</tr>
  <tr>
    <th>Customers</th>
    <th colspan="10">
      <hr />
  </tr>
  <tr class="custTitle">
    <th rowspan="2" class="title">Q1</th>
    <th>&nbsp;&nbsp;</th>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <th>THIS</th>
  </tr>
  <tr>
    <th>&nbsp;&nbsp;</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <th>TEST</th>
  </tr>

  <tr>
    <th colspan="11">
      <hr />
    </th>
  </tr>

  <tr class="custTitle">
    <th rowspan="2" class="title">Q2</th>
    <th>&nbsp;&nbsp;</th>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <th>THIS</th>
  </tr>
  <tr>
    <th>&nbsp;&nbsp;</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <th>TEST</th>
  </tr>

  <tr>
    <th colspan="11">
      <hr />
    </th>
  </tr>

  <tr class="custTitle">
    <th rowspan="2" class="title">Q3</th>
    <th>&nbsp;&nbsp;</th>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <td>
      <input type="text" class="makeInputWidth qwerty" />
    </td>
    <th>THIS</th>
  </tr>
  <tr>
    <th>&nbsp;&nbsp;</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <th>TEST</th>
  </tr>

  <tr>
    <th colspan="11">
      <hr />
    </th>
  </tr>





</table>

有人会：

  • （A）了解我在说什么，
  • （B）能够实现这个想法吗？

这是可行的JSFIDDLE

编辑历史

3 个答案:

答案 0 :(得分：1)

你可以这样做：

$('#selection td[rowspan]').click(function(e){
    $('td').removeClass('highlight');
    var i = $(this).attr('rowspan');
    var parent = $(this).parent();
    for(;i>0;i--){
        $(parent).find('td').addClass('highlight');
        parent = $(parent).next();
    }
});

在任何<td rowspan="2">标记上触发点击事件时。该脚本将首先删除任何先前的突出显示，然后它将读取rowspan属性的值，在这种情况下它是＆＃34; 2＆＃34;。它将循环2次（2行，包括当前行）并突出显示所有<td>标记。

在循环中parent = $(parent).next();实际上设置了对下一行的引用。

<强> FIDDLE DEMO

** 更新 **

我已经修改了一下脚本以包含没有rowspan属性的任何行。 （单排）。

$('#selection td:first-child').click(function(e){

    var i = $(this).attr('rowspan');
    if(typeof i == 'undefined')
        i=1;
    $('td').removeClass('highlight');
    var parent = $(this).parent();
    for(;i>0;i--){
        $(parent).find('td').addClass('highlight');
        parent = $(parent).next();
    }
});

修改：事件触发器更改为td:first-class并添加了if条件以检查当前<td>标记是否具有任何rowspan属性，如果不是，则将i的值设置为1。仅突出显示当前行。

<强> FIDDLE DEMO 2

答案 1 :(得分：1)

选择行：您需要选择包含所单击单元格的TR元素，如果单元格具有行数，则需要选择下一个兄弟元素。您可以按如下方式一起使用jQuery.nextAll()，jQuery.addBack()和jQuery.slice()：

＆＃13;
＆＃13; 
$(function() {
  $(".title1").on("click", function() {
    var rowspan = +$(this).attr("rowspan") || 1;
    $(this).closest("tr").nextAll().addBack().slice(0, rowspan).find("th, td").toggleClass("test1");
  });
  $(".title2").on("click", function() {
    var index1 = 0,
      index2 = +$(this).attr("colspan") || 1;
    $(this).prevAll().each(function() {
      var colspan = +$(this).attr("colspan") || 1;
      index1 += colspan;
      index2 += colspan;
    });
    $("tr:gt(2)").find("th, td").filter(function() {
      var index = $(this).index();
      // using heuristic, sorry
      if ($(this).closest("tr").hasClass("custTitle") === false) {
        index += 1;
      }
      return index >= index1 && index < index2;
    }).toggleClass("test2");
  });
});
＆＃13; 
.title1 {
  background-color: #808080;
}
.title2 {
  background-color: #808080;
}
.test1 {
  background: #F99;
}
.test2 {
  background: #99F;
}
.test1.test2 {
  background: #F9F;
}
input {
  width: 5em;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="thistable" border="1" cellpadding="2" cellspacing="0">
  <tr>
    <th>LOCATION</th>
    <th></th>
    <th class="title2" colspan="2">H1</th>
    <th class="title2" colspan="3">H2</th>
    <th class="title2">H3</th>
    <th class="title2" colspan="2">H4</th>
    <th></th>
  </tr>
  <tr>
    <th>PRODUCT</th>
    <th></th>
    <th class="rotateText">S1</th>
    <th class="rotateText">S2</th>
    <th class="rotateText">S3</th>
    <th class="rotateText">S4</th>
    <th class="rotateText">S5</th>
    <th class="rotateText">S6</th>
    <th class="rotateText">S7</th>
    <th class="rotateText">S8</th>
    <th></th>
  </tr>
  <tr>
    <th>Product id</th>
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>
    <th>7</th>
    <th>8</th>
    <th></th>
  </tr>
  <tr class="custTitle">
    <th class="title1" rowspan="2">Q1</th>
    <th></th>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <th>THIS</th>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <th>TEST</th>
  </tr>
  <tr class="custTitle">
    <th class="title1" rowspan="2">Q2</th>
    <th></th>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <th>THIS</th>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <th>TEST</th>
  </tr>
  <tr class="custTitle">
    <th class="title1" rowspan="2">Q3</th>
    <th></th>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <td><input type="text" class="makeInputWidth qwerty" /></td>
    <th>THIS</th>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <th>TEST</th>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

检查单击的单元格的rowspan，并在每个属于此表行的td上应用css类，然后下一个n（n = rowspan - 1）

$('.td_clicked').click(function() {
    var rowspan = $(this).attr('rowspan');
    for (i=1;i<=rowspan:i++) {
       $(this).parent('tr').find('td').addClass('highlighted_cell');
    }
});
相关问题
最新问题