记完整可编辑表格js方法

1，可编辑表格，新增，删除，排序

直接上代码

/**
 * 可编辑表格，上下移动函数
 * created by lixiaona 2019/08/06
 */

// 表格点击tr选中，加.on，使用表格排序必须先调用此方法
function trOnclick(editTable){
    editTable.delegate("tbody tr", "click", function() {
        editTable.find('tbody tr').removeClass('on');
        $(this).addClass('on');
    })
}

// 上移
function doUp(editTable){
    var $tr = editTable.find('tbody .on');
        if ($tr.index() != 0) {//判断是否为第一行
            var id1=$tr.children("td:first-child").text();//当前序号
            var id=$tr.prev().children("td:first-child").text();//前一个序号
            $tr.prev().children("td:first-child").text(id1);//交换序号
            $tr.children("td:first-child").text(id);
            $tr.prev().before($tr);
        }
}

// 下移
function doDown(editTable){
    var $tr = editTable.find('tbody .on');
        var trLength = editTable.find("tbody tr").length;

        if ($tr.index() != (trLength - 1)) {//判断是否为最后一行
            var id1=$tr.children("td:first-child").text();//当前序号
            var id=$tr.next().children("td:first-child").text();//下一行序号
            $tr.next().children("td:first-child").text(id1);//交换序号
            $tr.children("td:first-child").text(id);
            $tr.next().after($tr);
        }
}

// 最前
function doFirst(editTable){
    var $tr = editTable.find('tbody .on');
    var $pretr = $tr.prevAll();
    $pretr.each(function(){//遍历tr 把序号加一
        var text =Number($(this).children("td:first-child").text());
        text=Number(text+1);
        $(this).children("td:first-child").text(text);
    })
    $tr.fadeOut().fadeIn();
    $tr.children("td:first-child").text(1)//被置顶行的序号置为一
    editTable.find("tbody").prepend($tr);
}

// 最后
function doLast(editTable){
    var $tr = editTable.find('tbody .on');
    var $pretr = $tr.nextAll();
    var trLength = editTable.find("tbody tr").length;
    $pretr.each(function(){//遍历tr 把序号减一
        var text =Number($(this).children("td:first-child").text());
        text=Number(text-1);
        $(this).children("td:first-child").text(text);
    })
    $tr.fadeOut().fadeIn();
    $tr.children("td:first-child").text(trLength)//被最后行的序号置为最后
    editTable.find("tbody").append($tr);
}

/**
 * 两个表格表格行左右移动
 * @param {要移动的table|jquery对象} table1 
 * @param {被移动的table|jquery对象} table2 
 */

function doMove(table1, table2){
    var tr1 = table1.find('tbody .on');
    var tr2 = table2.find('tbody tr');
    var nextTr = tr1.nextAll();
    var order = tr2.length+1;
    if(tr1.length == 0){  //如果没有选中一条
        return;
    }
    tr1.remove();
    table2.find('.on').removeClass('on');
    tr1.children("td:first-child").text(order);
    table2.find('tbody').append(tr1);
    
    nextTr.each(function(){//遍历tr 把序号减一
        var text =Number($(this).children("td:first-child").text());
        text=Number(text-1);
        $(this).children("td:first-child").text(text);
    })
}

// 两个表格全部移动
function doAllMove(table1, table2) {
    var tr1 = table1.find('tbody tr');
    var tr2 = table2.find('tbody tr');
    var len = tr2.length;
    table1.find('tbody .on').removeClass('on');
    if(len > 0){ 
        tr1.each(function(i, item){
            var td = $(item).children('td:first-child');
            var order = Number(td.text())+Number(len);
            td.html(order);
            return item;
        })
        
    }
    table2.find('tbody').append(tr1);
    table1.find('tbody').empty();
}

// 删除表格行
function doRemoveTr(editTable){
    var $tr = editTable.find('.on');
    var $nexttr = $tr.nextAll();
    if($tr.length == 0){
        $.msg.alert('请选择要删除的数据！');
        return;
    }
    $nexttr.each(function(){//遍历tr 把序号加一
        var text =Number($(this).children("td:first-child").text());
        text=Number(text-1);
        $(this).children("td:first-child").text(text);
    })
    $tr.fadeOut().fadeIn();
    $tr.remove();  
}

/**
 * 回车跳转，最后一个新增一行
 * @param {*} table 表格的table对象$('#id')
 * @param {*} num 上下间隔的input数量
 * @param {*} addBtn 新增按钮对象$('#id')
 */
function tableInputEnter(table, num, addBtn){
    var $inputQuery = table.find('input');
    addBtn = addBtn || $('#add_tr');
    $inputQuery.on('keydown', function(event){
        $inputQuery = table.find('input');  //重新获取长度，从中间回车
        if(event.keyCode == 13){
          event.preventDefault();
          event.stopPropagation();
          var nextIndex = $inputQuery.index(this) + 1;
          if(nextIndex < $inputQuery.length){
            // $inputQuery[nextIndex].focus();  
            placeCaretAtEnd($inputQuery[nextIndex]);
          } else if(nextIndex >= $inputQuery.length){
            addBtn.click(); 
            tableInputEnter(table, num);
          }
        }else if(event.keyCode == 38){  //上
            event.preventDefault();
            event.stopPropagation();
            var prevIndexUp = $inputQuery.index(this) - num;
            if(prevIndexUp >= 0){
                // $inputQuery[prevIndexUp].focus();  
                placeCaretAtEnd($inputQuery[prevIndexUp]);
            }
        }else if(event.keyCode == 40){  //下
            event.preventDefault();
            event.stopPropagation();
            var nextIndexDown = $inputQuery.index(this) + num;
            if(nextIndexDown < $inputQuery.length){
                // $inputQuery[nextIndexDown].focus();  
                placeCaretAtEnd($inputQuery[nextIndexDown]);
            }
        }else if(event.keyCode == 37){  //左
            event.preventDefault();
            event.stopPropagation();
            var prevIndexLeft = $inputQuery.index(this) - 1;
            if(prevIndexLeft >= 0){
                // $inputQuery[prevIndexLeft].focus();
                placeCaretAtEnd($inputQuery[prevIndexLeft]);  
            }
        }else if(event.keyCode == 39){  //右
            event.preventDefault();
            event.stopPropagation();
            var nextIndexRight = $inputQuery.index(this) + 1;
            if(nextIndexRight < $inputQuery.length){
                // $inputQuery[nextIndexRight].focus(); 
                placeCaretAtEnd($inputQuery[nextIndexRight]);   
            }
        }
    });
}

// 获取焦点，光标落在文本最后
function placeCaretAtEnd (jsDom) {    //传入光标要去的jsDom节点
    var val = $(jsDom).val();
    $(jsDom).focus();
    $(jsDom).val("");
    $(jsDom).val(val);
}