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

我有一张非常特别的桌子。我很难返回特定元素的相对标题，如下所示

表格结构类似于以下内容：

<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>

$(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);

    });

});

参数1
参数2
国家1.1
国家1.2
国家1.3
国家2.1
国家2.2
参数2
国家2.1
-
-
-
国家2.2
-
-
-
参数3
国家3.1
-
-
-
-
-
国家3.2
-
-
-
-
-
国家3.3
-
-
-
-
-

假设单击“contenteditable”单元格，如何返回行标题和列标题？请检查上面提供的jsfiddle。

我必须获取水平参数。

---

需要向每个包含参数名的

tr

添加一个类。还为所选的

tr

上色，以便于可视化和调试所选内容。获取垂直参数名称将是另一个问题。

我可以通过执行以下操作来获取它：

<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>

$(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);

    });

});

$（文档）.ready（函数（）{
$（'table'）。在（'click'，'td[contenteditable]'上，函数（e）{
//水平参数
如果（$（this）.parent（）具有（'th'）。长度>0）{
HPParameter=$（this.parent（）.find（'th'）.text（）；
}否则{
HPParameter=$（this）.parent（）.prevAll（'tr'）.has（'th'）.first（）.find（'th'）.text（）；
}
$（“#水平参数”）.text（'H:'+hParameter）；
//垂直参数
变量thLocator=[]，
colCount=1；
$table=$（'table'）；
$table.find（'tr:first th'）。每个（函数（）{
对于（var i=0；i

它的可能副本并不是真正的副本，但是是的，这确实帮助了我！谢谢，@Zzirconium。如果您检查JSFIDLE，您会发现由于colspans和rowspans，这不起作用。@gtamorim抱歉，我想我不看示例就理解了这个问题。我已经更新了我的回复。谢谢@Matthew Rapati！我能够让它工作：