通过单击任何单元格或表格数据,其左侧和顶部标题查找

时间:2012-04-28 22:40:35

标签: javascript jquery html css

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

我希望能够点击任何单元格或表格数据并获取其左侧和顶部标题。

  1. 所以,如果我点击“D9:LH1-TH4(H4a)”,我应该得到:

    • 左标题为:LH1,顶部标题1为TH4,顶部标题2为H4a
  2. 如果我点击“D3:LH2-TH2(H2b-H4a)”,我应该得到:

    • 左标题为LH2,顶标题1为TH2,顶标题为H2b

  3. 示例:

    <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

2 个答案:

答案 0 :(得分:1)

这令人讨厌。 您可以使用父偏移找到标题。

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

答案 1 :(得分:0)

$('td')​.on('click', function() {
    var text = $(this).text().split(':')[1],
        LH = text.split('-')[0],
        TH = text.split('-')[1].split('(')[0],
        TH2 = text.split('-')[1].split('(')[1];
    console.log('Left header is '+LH+', Top header 1 is '+TH+' and Top header 2 is '+TH2)
})​;​

FIDDLE