表格:每个单元格链接到包含列和行数据的URL [英] Table: each cell links to url containing column and row data

问题描述

我希望表格中的每个单元格(不包括标题，并且必须为数字)链接到使用单元格位置(即单元格编号和列编号)形成的URL.

I want each cell in my table (excluding headers and has to be a number) to link to a URL which is formed using the position of the cell, i.e. the cell number and column number of it.

例如单元格将链接到example.com/hello.html?column=1&row=3

E.g. a cell will link to example.com/hello.html?column=1&row=3

理想情况下，这将使用jQuery完成...除非有更好的方法?我无法轻易更改生成表的PHP代码，因此我认为它必须在浏览器端.

Ideally this would be done with jQuery...unless there is a better way? I can't easily alter the PHP code that is generating the table, so I think it will have to be browser-side.

我看过数据表及其api调用fnGetPosition，但不确定如何将其转换为链接该运算符可用于不是第一行或第一列的每个数字单元格.

I've had a look at datatables and its api call fnGetPosition but am unsure how to convert this into a link which operates on every numerical cell that isn't the first row or column.

推荐答案

就jQuery而言，答案位于

The answer, as far as jQuery is concerned, lies within .index()

给出以下html:

<table>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
        <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
<table>

jQuery如下所示:

The jQuery would look like this:

$('tr td').each( function() {
    var colNum = $(this).index();
    var rowNum = $(this).parent().index();
    $(this).wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">');
})

此处的工作示例- http://jsfiddle.net/NDpCa/3/

这篇关于表格:每个单元格链接到包含列和行数据的URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！