Table: each cell links to url containing column and row data
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.
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/
精彩评论