如何获取单元格的相对标头？

Question

I have a very unusual table. I am struggling to be able to return the relative header of a specific element, as per this http://jsfiddle.net/yh6C6/

The table structure is similar to the following:

<table border>
    <tbody>
        <tr>
            <th></th>
            <th></th>
            <th colspan="3">Parameter 1</th>
            <th colspan="2">Parameter 2</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>
                <div>
                    <div>State 1.1</div>
                </div>
            </td>
            <td>
                <div>
                    <div>State 1.2</div>
                </div>
            </td>
            <td>
                <div>
                    <div>State 1.3</div>
                </div>
            </td>
            <td>
                <div>
                    <div>State 2.1</div>
                </div>
            </td>
            <td>
                <div>
                    <div>State 2.2</div>
                </div>
            </td>
        </tr>
        <tr>
            <th rowspan="2">Parameter 2</th>
            <td>State 2.1</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
        </tr>
        <tr>
            <td>State 2.2</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
        </tr>
        <tr>
            <th rowspan="3">Parameter 3</th>
            <td>State 3.1</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
        </tr>
        <tr>
            <td>State 3.2</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
        </tr>
        <tr>
            <td>State 3.3</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
            <td contenteditable="true">-</td>
        </tr>
    </tbody>
</table>

Assuming you click on the 'contenteditable' cells, how can I return the row and column headers? Please check the jsfiddle provided above.

Answer 1

I've edited the fiddle to get the horizontal parameter. Needed to add a class to each tr that contained a parameter name. Also coloured the selected tr to make it easier to visualize and debug what is being selected. Getting the vertical parameter name will be a different problem.

Answer 2

I was able to get it by doing the following:

$(document).ready(function () {
    $('table').on('click', 'td[contenteditable]', function (e) {

        // Horizontal Parameter
        if ($(this).parent().has('th').length > 0) {
            hParameter = $(this).parent().find('th').text();
        } else {
            hParameter = $(this).parent().prevAll('tr').has('th').first().find('th').text();
        }
        $('#horizontal-parameter').text('H: ' + hParameter);

        // Vertical Parameter
        var thLocator = [],
            colCount = 1;
        $table = $('table');
        $table.find('tr:first th').each(function () {
            for (var i = 0; i < this.colSpan; i++) {
                thLocator.push(colCount);
            }
            colCount++;
        });

        vParameter = $table.find('tr:first th:nth-child(' + thLocator[$(this).index()] + ')').text();

        $('#vertical-parameter').text('V: ' + vParameter);

    });

});