Determine Click Position (Row and Column Number) on click of a table cell

 

 

Prepare a dummy HTML table for testing purpose. ‘result’ Div will show the corresponding row and column number when a particular cell of ‘myTable’ table is clicked.

<div id=«result«> </div>
<table id=«myTable« border=«1« styleborder-collapse: collapse;« cellpadding=«8«>
<!–1st ROW–>
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
<td>row 1, col 3</td>
<td>row 1, col 4</td>
<td>row 1, col 5</td>
</tr>

<!–2nd ROW–>
<tr>
<td>row 2, col 1</td>
<td>row 2, col 2</td>
<td>row 2, col 3</td>
<td>row 2, col 4</td>
<td>row 2, col 5</td>
</tr>

<!–3rd ROW–>
<tr>
<td>row 3, col 1</td>
<td>row 3, col 2</td>
<td>row 3, col 3</td>
<td>row 3, col 4</td>
<td>row 3, col 5</td>
</tr>

<!–4th ROW–>
<tr>
<td>row 4, col 1</td>
<td>row 4, col 2</td>
<td>row 4, col 3</td>
<td>row 4, col 4</td>
<td>row 4, col 5</td>
</tr>

<!–5th ROW–>
<tr>
<td>row 5, col 1</td>
<td>row 5, col 2</td>
<td>row 5, col 3</td>
<td>row 5, col 4</td>
<td>row 5, col 5</td>
</tr>
</table>

Copy

Add following Javascript code to determine the click position on click of a table cell.

$(document).ready(function(){
$(«#myTable td»).click(function() {

var column_num = parseInt( $(this).index() ) + 1;
var row_num = parseInt( $(this).parent().index() )+1;

$(«#result»).html( «Row_num =» + row_num + » , Rolumn_num =»+ column_num );
});
});

Copy

Download SrcCodes

demo.html

Continua leyendo «Determine Click Position (Row and Column Number) on click of a table cell»

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *