事件委托案例

<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>
进行js编译：

<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>