单击单元格时选择关联的表头

Question

如何使用 jQuery 找到每个表格单元格的“视觉位置”的标题行？
例如，如果单击“this”或“click this”单元格，则获取“second”单元格的文本。

table,
th,
td {
  border: 1px solid black;
}

<table class="table table-bordered">
  <thead>
    <tr>
      <th>third</th>
      <th colspan="2">second</th>
      <th>third</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2"></td>
      <td>this</td>
      <td>this</td>
      <td></td>
    </tr>
    <tr>
      <td rowspan="2">this</td>
      <td>click this</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>this</td>
      <td></td>
    </tr>
  </tbody>
</table>

View on JSFiddle

Answer 1

这里是解决办法

$(document).ready(function(){
  $('.table td').bind('click',ClickMe)
});
function ClickMe(event){
  var targetObject=event.target;
  var $targetObject=$(targetObject);
  var index=$targetObject.index();
 var $indexObject=$targetObject.closest('table').find('th').eq(index);
  alert($indexObject.html());
}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>third</th>
      <th colspan="2">second</th>
      <th>third</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2"></td>
      <td>this</td>
      <td>this</td>
      <td></td>
    </tr>
    <tr>
      <td rowspan="2">this</td>
      <td>click this</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>this</td>
      <td></td>
    </tr>
  </tbody>
</table>

希望对你有帮助