通过单击任何单元格或表格数据，其左侧和顶部标题查找 [英] Find by clicking any cell or table data, its left and top headers

问题描述

我有多个列标题跨越多个列，我想找到列的正确的标题号/计数。还有一些表数据有rowspan和colspan。

我想要能够点击任何单元格或表格数据，并得到它的左边和顶部标题。

因此，如果我点击D9：LH1-TH4（H4a），我应该得到：

< b $ b

• 左标题为：LH1，顶标题1为TH4，顶标题2为H4a

<如果我点击D3：LH2-TH2（H2b-H4a），我应该得到：

• 左标题为LH2，顶部标题1为TH2，顶部标题2为H2b

示例：

 < table width =200border =1 style =background-color：＃000; color：#FFF> 
< tr> 
< th scope =col>& nbsp;< / th> 
< th colspan =2scope =col> TH1< / th> 
< th colspan =4scope =col> TH2 th th。 
< th colspan =6scope =col> TH4< / th> 
< / tr> 
< tr> 
< th scope =col>& nbsp;< / th> 
< th scope =col> H1a< / th> 
< th scope =col> H1b< / th> 
< th scope =col> H2a< / th> 
< th scope =col> H2b< / th> 
< th scope =col> H2c< / th> 
< th scope =col> H2d< / th> 
< th colspan =6scope =col> H4a< / th> 
< / tr> 
< tr> 
< th rowspan =3scope =row>< span> LH1< / span>< / th> 
< td colspan =2rowspan =3> D1：LH1-TH1（H1a-H1b）< / td> 
< td colspan =3rowspan =2> D2：LH1-TH2（H2a-H2c）< / td> 
< td rowspan =3> D5：LH1-TH2（H2d）< / td> 
< td rowspan =3> D6：LH1-TH4（H2a-H2c）< / td> 
< td colspan =2> D7：LH1-TH4（H4a）< / td> 
< td> D8：LH1-TH4（H4a）< / td> 
< td rowspan =3> D13：LH1-TH4（H4a）< / td> 
< td rowspan =3> D14：LH1-TH4（H4a）< / td> 
< / tr> 
< tr> 
< td colspan =3> D9：LH1-TH4（H4a）< / td> 
< / tr> 
< tr> 
< td colspan =2> D3：LH1-TH2（H2a-H2b）< / td> 
< td> D4：LH1-TH2（H2c）< / td> 
< td> D10：LH1-TH4（H4a）< / td> 
< td> D11：LH1-TH4（H4a）< / td> 
< td> D12：LH11-TH4（H4a）< / td> 
< / tr> 
< tr> 
< th scope =row>< span> LH2< / span>< / th> 
< td colspan =2> D1：LH2-TH1（H1a-H1b）< / td> 
< td colspan =3> D2：LH2-TH2（H2a-H2c）< / td> 
< td colspan =5> D3：LH2-TH2（H2b-H4a）< / td> 
< td> D4：LH2-TH4（H4a）< / td> 
< td> D5：LH2-TH4（H4a）< / td> 
< / tr> 
< / table> 
  

---

请参阅此链接

解决方案

这是恼人的棘手。
您可以使用父偏移量来找到您的标题。

让它工作在这个小调中
http://jsfiddle.net/work4liberty/fk6sy/14/

I have multiple column headers that spans of multiple column and I would like to find the correct header number/count for the columns. Also some of the table data have rowspan and colspan.

I want to be able to click any cell or table data and get its left and top headers.

1. So if I click the with "D9:LH1-TH4(H4a)" I should get:

   • Left Header is: LH1, Top Header1 is TH4 and Top Header 2 is H4a

2. And if I click the with "D3:LH2-TH2(H2b-H4a)" I should get:

   • Left Header is LH2, Top Header 1 is TH2 and Top Header 2 is H2b

---

Example:

<table width="200" border="1" style="background-color:#000; color:#FFF">
  <tr>
    <th scope="col">&nbsp;</th>
    <th colspan="2" scope="col"> TH1 </th>
    <th colspan="4" scope="col"> TH2 </th>
    <th colspan="6" scope="col"> TH4 </th>
  </tr>
    <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col"> H1a </th>
    <th scope="col">H1b</th>
    <th scope="col"> H2a</th>
    <th scope="col">H2b</th>
    <th scope="col">H2c</th>
    <th scope="col">H2d</th>
    <th colspan="6" scope="col"> H4a </th>
  </tr>
  <tr>
    <th rowspan="3" scope="row"><span>LH1</span></th>
    <td colspan="2" rowspan="3">D1:LH1-TH1(H1a-H1b)</td>
    <td colspan="3" rowspan="2">D2:LH1-TH2(H2a-H2c)</td>
    <td rowspan="3">D5:LH1-TH2(H2d)</td>
    <td rowspan="3">D6:LH1-TH4(H2a-H2c)</td>
    <td colspan="2">D7:LH1-TH4(H4a)</td>
    <td>D8:LH1-TH4(H4a)</td>
    <td rowspan="3">D13:LH1-TH4(H4a)</td>
    <td rowspan="3">D14:LH1-TH4(H4a)</td>
  </tr>
  <tr>
    <td colspan="3">D9:LH1-TH4(H4a)</td>
  </tr>
  <tr>
    <td colspan="2">D3:LH1-TH2(H2a-H2b)</td>
    <td>D4:LH1-TH2(H2c)</td>
    <td>D10:LH1-TH4(H4a)</td>
    <td>D11:LH1-TH4(H4a)</td>
    <td>D12:LH11-TH4(H4a)</td>
  </tr>
  <tr>
    <th scope="row"><span>LH2</span></th>
    <td colspan="2" >D1:LH2-TH1(H1a-H1b)</td>
    <td colspan="3">D2:LH2-TH2(H2a-H2c)</td>
    <td colspan="5">D3:LH2-TH2(H2b-H4a)</td>
    <td>D4:LH2-TH4(H4a)</td>
    <td>D5:LH2-TH4(H4a)</td>
  </tr>
</table>​

---

Please see this link

解决方案

That was annoyingly tricky. you can find your headers by using the parent offsets.

got it working in this fiddle http://jsfiddle.net/work4liberty/fk6sy/14/

这篇关于通过单击任何单元格或表格数据，其左侧和顶部标题查找的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！