SO Help: Get a td element's coordinates in an html table with JQuery

http://stackoverflow.com/questions/23543922/get-a-td-elements-coordinates-in-an-html-table-with-jquery#23544184

by SpYk3

HTML

<link rel="stylesheet" href="http://www.w3schools.com/stdtheme.css">
<h1>Click any cell to see its place in the table.</h1>
<h3>Keep in mind, in this example, the head cells are in seperate (thead) area than the body cells.</h3>
<table class="reference" style="width:60%">
    <thead>
        <tr>
            <th>ONE</th>
            <th>TWO</th>		
            <th>THREE</th>
        </tr>
    </thead>
	<tbody>
	<tr>
		<td>ONE</td>
		<td>Smith</td>		
		<td>50</td>
	</tr>
	<tr>
		<td>TWO</td>
		<td>Jackson</td>		
		<td>94</td>
	</tr>
	<tr>
		<td>THREE</td>
		<td>Doe</td>		
		<td>80</td>
	</tr>
	<tr>
		<td>FOUR</td>
		<td>Johnson</td>		
		<td>67</td>
	</tr>
	<tr>
		<td colspan="2">FIVE</td>	
        <td>5/2</td>
	</tr>
	<tr>
        <td>SIX</td>
        <td>6/2</td>
        <td rowspan="2">6/3</td>
    </tr>
    <tr>
        <td>SEVEN</td>
        <td>7/2</td>
    </tr>
</tbody>
</table>

<hr/>
<label for="inpRow">&nbsp; &nbsp; Row</label><input id="inpRow" type="text" readonly="readonly" />
<br />
<label for="inpCol">Column</label><input id="inpCol" type="text" readonly="readonly" />

CSS

td { cursor: pointer; }
input { font-size: 2em; margin-left: .5em; width: 20px; }

JavaScript

$(document).on('click', 'th, td', function(e) {
    var index_row = $(this).closest('tr').index() + 1,
        index_column = $(this).index() + 1;
    
    $('#inpRow').val(index_row);
    $('#inpCol').val(index_column);
})