题目涌现的场景是：
运用dataTables组件，然则该组件没有自带的编辑功用，所以须要本身处置惩罚table在行内编辑的结果。

目的结果是：
1.当hover到当前tr的时刻，该行tr中可以编辑的td中涌现一个input框：

2.当脱离当前tr的时刻，该行退出可编辑的状况，恢复到没有hover上去之前的结果。

3.当td变成可编辑状况，即涌现了一个input输入框的时刻，focus到input输入框中，可以输入number；当input框发作blur事宜的时刻，td恢复到非编辑状况：

因为blur和moseleave都邑让输入框恢复到非编辑的状况，所以，这里的事宜会有争执。

在现实的编码中，在tr上绑定了mouseenter和mouseleave事宜；

mouseenter事宜的绑定：

function mouseenterEvt (e) {
    var tds = $(this).children('td');
    $.each(tds, function (i, val) {
        var jqob = $(val);
        if (i !== 3) {
            return true;
        }
        // if there is something validate wrong,stay there width no value exchange
        var validateSpanDom = jqob.find('span');
        var value = validateSpanDom ? validateSpanDom.text() : '';
        var validateTxt = validateInputBox(value);
        if(validateTxt) return false;
        // open edit mode
        jqob.addClass("edit-btn-display");
        var txt = jqob.text();
        txt = txt.replace('$', '');
        txt = txt.replace(/,/g, '');
        var put = $("<div class=\"money-budget-validate\"><input type='text' class='edit-input-box'><span></span></div>");
        put.children('.edit-input-box').val(txt);
        jqob.html(put);

    });
}
$("#table_id_example tbody").on("mouseenter", "tr",mouseenterEvt );

mouseleave事宜的绑定：

$("#table_id_example tbody").on("mouseleave", "tr", function (e) {
    var row = tableDom.row($(this));
    var tds = $(this).children('td');

    $.each(tds, function (i, val) {
        var jqob = $(val);
        if (jqob.hasClass('edit-btn-display') && jqob.find('.edit-input-box').length > 0) {
            // if there is something validate wrong,stay there width no value exchange
            var validateSpanDom = jqob.find('span');
            var value = validateSpanDom ? validateSpanDom.text() : '';
            var validateTxt = validateInputBox(value);
            if(validateTxt) return false;
            var txt = jqob.find('.edit-input-box').val();
            txt = txt.replace('$', '');
            if(String(txt).indexOf('.') !== -1 ) {
                txt = Number(txt).toFixed(2);
            }
            jqob.html(txt);
            tableDom.cell(jqob).data(txt);
            // close edit mode
            jqob.removeClass("edit-btn-display");
        }
    });

    $("#table_id_example tbody").off("mouseenter", "tr",mouseenterEvt )
    $("#table_id_example tbody").on("mouseenter", "tr",mouseenterEvt )
});

在input输入框上绑定了blur事宜：

blur事宜的绑定：

$("#table_id_example tbody").on("blur", ".edit-input-box", function (e) {
    var value = $(this).val();
    var validateTxt = validateInputBox(value)
    if (!validateTxt) {
        var td = $(this).parents('td');
        var row = tableDom.row($(td));
        $(this).toggleClass("edit-btn-being-edit");
        var txt = $(this).val();
        txt = txt.replace('$', '');
        if(String(txt).indexOf('.') !== -1 ) {
            txt = Number(txt).toFixed(2);
        }
        td.html(txt);
        tableDom.cell(td).data(txt);//change data of DataTables obj
        var data = row.data();
        //alert('save current monthly-budget value')
        $("#table_id_example tbody").off("mouseenter", "tr",mouseenterEvt )
    }
});

关于事宜解绑和从新绑定的诠释：

• 当没有举行事宜的解绑和从新绑定的时刻，在input框中输入完毕，点击input地点的td的时刻，会接着触发mouseenter事宜；然则当点击该input地点的td以外的td的时刻，就会发作blur事宜和mouseleave事宜。
• 为了，在点击当前input地点的td的时刻，只发作blur事宜，须要在blur事宜完毕以后，删除mouseenter事宜的绑定。如许，tr的mouseenter事宜被删除了就不会触发了。
• 然则，在当前行blur以后，再进入其他的行照旧须要可以编辑，又因为编辑完一行以后，肯定是会mouseleave该行的，因而，在tr的mouseleave事宜中又将tr的mouseenter事宜加回去。
• 须要注重一点，我们在运用jq绑定事宜的时刻，反复的事宜是不会被消灭的，而是会累加，所以，在mouseleave中从新增加事宜之前，须要将之前的先消灭。在这里就是：在mousenter以后基础没有对input举行编辑就mouseleave了，此时在mouseleave中若不先消灭原有的事宜，那末tr上的mouseenter事宜就会被增加两次。