技術標籤：javascriptjquery

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);
}