jQuery利用鍵盤上下鍵移動表格內容

更新時間：2022年02月22日 10:10:10 作者：Cheang_Bokgaai

這篇文章主要為大家詳細介紹了jQuery利用鍵盤上下鍵移動表格內容，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery利用鍵盤上下鍵移動表格內容的具體代碼，供大家參考，具體內容如下

在我們編輯表格內容時，經常需要將表格內容的位置進行移動，而利用鍵盤上下鍵進行移動是十分方便的。

效果如下：

基本原理是：先使用鼠標選中其中的一行，隨后使用鍵盤上下鍵，通過獲取不同的鍵值區(qū)分上移和下移的操作，隨后首先交換兩行的編號，隨后交換兩行的內容，保證了兩行內容移動而編號不改變。

下面是代碼：

function clickA(obj){
? ?
? ? ? ? currentLine=$.trim($(obj).find("td:first-child").html());
? ? ??
? ? ? ? $('#table1 tr').each(function () { $(this).css("background-color", "white"); });
? ? ? ? //將所有行變?yōu)榘咨?
? ? ? ? $('#line' + currentLine).each(function () { $(this).css("background-color", "red"); });
? ? ? ? //將當前行變?yōu)榧t色
? ? ? ??
?
? ? ? ? //獲取當前行數(shù)?
}

以上為鼠標的點擊一行的操作，獲取當前的行數(shù)，以及將當前行變?yōu)榧t色。

<tr id=\"line"+num+"\" onclick='clickA(this)'></tr>

這個表格每一行的點擊事件綁定。

?$(document).keydown(function(event){ ?
?
? ? ? ? ? if(event.keyCode == 38){ ?
? ? ? ? ? ? //鍵盤上鍵
? ? ? ? ? ? ?up_exchange_line();
? ? ? ? ? }else if (event.keyCode == 40){ ??
? ? ? ? ? ? down_exchange_line();
? ? ? ? ? ? //鍵盤下鍵
? ? ? ? ? }
? ? ? });

這個是獲取撲捉鍵盤上下鍵動作，進行不同的操作

function up_exchange_line(index) {
? ? ? ? if(currentLine != null && currentLine!= " "){
? ? ? ? ? ? nowrow = currentLine;
? ? ? ? ? ? //獲取當前行
? ? ? ? }else if (index != null) {
? ? ? ? ? ? nowrow = $.trim($(index).parent().parent().find("td:first-child").html());
? ? ? ? }
? ? ? ? if (nowrow == 0) {
? ? ? ? ? ? alert('請點擊一行');
? ? ? ? ? ? return false;
? ? ? ? ? ? //未點擊，無當前行要求用戶點擊一行
? ? ? ? }
? ? ? ?
? ? ? ? if (nowrow <= 1) {
? ? ? ? ? ? alert('已到達頂端!');
? ? ? ? ? ? return false;
? ? ? ? ? ? //上移到頂端后提示
? ? ? ? }
? ? ? ??
? ? ? ? var up = nowrow - 1;
? ? ? ?//首先交換兩行序號
? ? ? ? $('#line' + up + " td:first-child").html(nowrow);
? ? ? ? $('#line' + nowrow + " td:first-child").html(up);
? ? ? ? //變色
? ? ? ? $('#table1 tr').each(function () { $(this).css("background-color", "white"); });
? ? ? ? $('#line' + up).css("background-color", "red"); ;
? ? ? ? //獲取兩行的內容
? ? ? ? var upContent = $('#line' + up).html();
? ? ? ? var currentContent = $('#line' + nowrow).html();
? ? ? ?//交換內容
? ? ? ? $('#line' + up).html(currentContent);
? ? ? ? $('#line' + nowrow).html(upContent);
? ? ? ??
? ? ? ? ? ? ?currentLine = up;
? ? ? ? ? ? ?//改變當前行，為繼續(xù)上移做準備
}

這個上移的方法，首先獲取當前行數(shù)，隨后獲取上一行的行數(shù)，首先進行序號的交換，隨后將當前行的紅色變至上一行，隨后交換所有的內容，最后更新當前行。這樣保證了，內容和當前所在行會跟這個鍵盤上鍵而移動而序號可以保持不變。

function down_exchange_line(index) {
? ? ? ? if(currentLine != null && currentLine != " "){
? ? ? ? ? ? nowrow = currentLine;
? ? ? ? }else if (index != null) {
? ? ? ? ? ? nowrow = $.trim($(index).parent().parent().find("td:first-child").html());
? ? ? ? }
? ? ? ? if (nowrow == 0) {
? ? ? ? ? ? alert('請選擇一項!');
? ? ? ? ? ? return false;
? ? ? ? }
? ? ? ? maximum=$("#table1").find("tr").length ;
? ? ? ? if (nowrow >= maximum-1) {
? ? ? ? ? ? alert('已經是最后一項了!');
? ? ? ? ? ? return false;
? ? ? ? }
? ? ? ? var dS = parseInt(nowrow) + 1;
? ? ? ? $('#line' + dS + " td:first-child").html(nowrow);
? ? ? ? $('#line' + nowrow + " td:first-child").html(dS);
? ? ? ? //變色
? ? ? ? $('#table1 tr').each(function () { $(this).css("background-color", "white"); });
? ? ? ? $('#line' + dS).css("background-color", "red");?
? ? ? ? //獲取兩行的內容
? ? ? ? var nextContent = $('#line' + dS).html();
? ? ? ? var currentContent = $('#line' + nowrow).html();
? ? ? ? //交換內容
? ? ? ? $('#line' + dS).html(currentContent);
? ? ? ? $('#line' + nowrow).html(nextContent);
? ? ??
? ? ? ? if(dS>maximum-1){
? ? ? ? ? ? currentLine=dS-1;
? ? ? ? }else{
? ? ? ? ? ? ?currentLine = dS;
? ? ? ? }
? ? ? ??
}

同理，下降也是使用相同的方法，只不過是向下交換數(shù)據(jù)。

這樣基于jQuery使用鍵盤上下鍵交換表格內容的操作就完成了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: