事件委托案例

<table id="table1">
<tr >
<th >姓名</th>
<th >性别</th>
<th >科目</th>
<th >成绩</th>
</tr>
<tr>
<td class="td1">张三</td>
<td class="td1">男</td>
<td class="td1">html</td>
<td class="td1">98</td>
</tr>
</table>

首先进行表格的样式编译：

<style type="text/css">
table{

cellpadding:20px;
cellspacing: 0px;
width: 500px;
}
tr{
border:1px solid black;
}
th{
border:1px solid black;
}
td{
border:1px solid black;
height:30px;
text-align: center;
}

</style>

<script>
window.onload =function() {

(function() {

var table1 = document.getElementById("table1");
var td1 = document.getElementsByClassName("td1");
table1.ondblclick = function (e){
var ev = e || window.event;
var se = ev.srcElement || ev.target;
if (se.className == "td1") {
var input1 = document.createElement("input");
input1.type = "text";
var text = se.innerText;
se.innerHTML = "";
se.appendChild(input1);
input1.focus();
}
input1.onblur = input1.onkeydown = input1.ondblclick = function(e){
var ev = e || window.event;

if(ev.type =="blur"||(ev.type=="keydown"&& ev.keyCode=="13")||ev.type=="dblclick"){
var a;
if(input1.value.trim()){
a = input1.value;
}else{
a = text;
}
se.removeChild(input1) ;
se.innerHTML = a;
}
}

}
}())

}

</script>