Question

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.

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

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.

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.

Answer 1

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

Given the following 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>

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 +'">');
})

A working example here – http://jsfiddle.net/NDpCa/3/