关于table嵌套后的onclick问题

今天在学习过程中出现一个很有意思的问题，想问问大家

在源文件里，首先我用js定义了一个symbol变量
然后写这样的一段html

HTML code

<table id="cke_60_uiElement" class="cke_dialog_ui_html" style="border: 1px solid black; width: 100px; height: 30px">
<tbody>
<tr>
<td id="main_table" onclick="this.innerHTML = $('#symbol').val()">
<div>
<table>
<tbody>
<tr>
<td id="plus_1_left" onclick="$('#plus_1_left').innerHTML = 'hello'" style="border: 1px solid black; cursor: pointer; backgound: #c7c78f; padding: 0px 3px 0px 3px;">P</td>
<td>&nbsp;+&nbsp;</td>
<td style="border: 1px solid black;">P</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<input id="symbol" class="cke_dialog_ui_html" type="hidden" />
</tbody>
</table>

这个时候，如果我点<td id="plus_1_left" onclick="$('#plus_1_left').innerHTML = 'hello'" style="border: 1px solid black; cursor: pointer; backgound: #c7c78f; padding: 0px 3px 0px 3px;">P</td>这个td的时候，按道理说，应该是hello替换了原来的P， 其他不变，但实际情况是，按完的效果和按<td id="main_table" onclick="this.innerHTML = $('#symbol').val()">这个td的效果是一样的。不知道怎么回事，但是如果把onclick="$('#plus_1_left').innerHTML = 'hello'"改成onclick="alert('hello')"这样就可以正常显示了。请问这个是怎么回事啊，，谢谢阿

HTML code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
function doit(evt){
    if(document.all) event.cancelBubble = true;
    else evt.stopPropagation();
    $('#plus_1_left').html('hello');
}
</script>
<table id="cke_60_uiElement" class="cke_dialog_ui_html" style="border: 1px solid black; width: 100px; height: 30px">
<tbody>
<tr>
<td id="main_table" onclick="this.innerHTML = $('#symbol').val()">
<div>
<table>
<tbody>
<tr>
<td id="plus_1_left" onclick="doit(event);" style="border: 1px solid black; cursor: pointer; backgound: #c7c78f; padding: 0px 3px 0px 3px;">P</td>
<td>&nbsp;+&nbsp;</td>
<td style="border: 1px solid black;">P</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<input id="symbol" class="cke_dialog_ui_html" type="hidden" value="test"/>
</tbody>
</table>