Get value from selected row/celll - asp.net-mvc

Question

I'm creating table like this:
<table>
<tr>
<th>Column</th>
</tr>
#foreach (var item in someList)
{
foreach (var item1 in item)
{
<tr>
<td onclick="myMethod();">#item1.name</td>
</tr>
}
}
</table>
And here is the method which is called when the row is selected:
<script type="text/javascript" language="javascript">
function myMethod() {
var clickedCell = $(this);
alert(clickedCell.text());
}
</script>
But it's not working! How can I get the text from the row/cell which is selected/clicked on?
I also tried:
<script type="text/javascript" language="javascript">
function myMethod() {
alert($(this).html());
}
</script>
and it's giving me null althought the table is full.

Answer 1

I'm inferring from this line that you're using jQuery:
var clickedCell = $(this);
If that's the case, let's take a step back for a moment and separate your JavaScript from your HTML. Instead of this:
<td onclick="myMethod();">#item1.name</td>
which has in-line JavaScript (which is generally frowned upon), try something like this:
<td class="clickableCell">#item1.name</td>
Now it's just markup, which is a bit cleaner. Next you need to attach click events to your rendered cells:
$(document).ready(function() {
$('td.clickableCell').click(function() {
alert($(this).text());
});
});
Now this refers to the element to which jQuery is binding the click event, so it can be easily referenced in the code, as opposed to having to pass a self-reference from the click event being bound within the HTML (which is another approach, but continues down the road of mixing markup with code).