實現效果： 點擊按鈕，上下移動行
思路：
實現代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<!-- 實現思路： 將上按鈕和下按鈕元素，分別循環添加up事件和down事件，當事件觸發時，獲取當前點擊的元素的父級的父級的tr，和tr的父級tbody，tbody的父級table -->
<!-- 循環找出表格全部行 等於 當前點擊行的元素 找出他的索引 -->
<script type="text/javascript">
function up(obj) {
// 1.獲取tr
var tr = obj.parentNode.parentNode;
// 2.獲取tbody
var tbody = tr.parentNode;
// 4.獲取索引
var rowIdx = 0;
// 5.遍歷tbody下全部行
for (var i = 0; i < tbody.rows.length; i++) {
// 6. 判斷 是否等於當前點擊按鈕元素的tr
if (tbody.rows[i] == tr) {
// 7. 如果等於 ，將i的值給索引遍歷，並跳出循環
rowIdx = i;
break;
}
}
// 排除第一行，不再往上
//8. 如果索引等於0 就是第一行了，不能再往上了
if (rowIdx == 0) return alert('已經是最上一行了');
// 如果不是第一行的索引，繼續往下
// 9.1 獲取並存儲當前tr 的 前一個tr元素
var preTr = tbody.rows[rowIdx - 1];
// 9.2 獲取並存儲當前tr 的 下一個tr元素
var nextTr = tr.nextSibling;
// 9.3 移除當前tr的前一個tr
tbody.removeChild(preTr);
// 10.1. 判斷當前tr是否存在下一個tr 如果存在則插入在下一個tr之前 格式insertBefore（要插入的元素, 定位的元素） 作用：將要插入的元素插入在定位元素之前
// 10.2 否則直接追加在表格的最后
// 在這里就一個目的 將當前tr的前一個元素刪除了並把它放在我當前tr的之后，那我當前tr排位就上升了
// 所以 如果我當前有下一個tr就插入在他的之前，如果沒有證明我是在最后一行，那就直接將元素追加在表格后面就行了
if (nextTr) tbody.insertBefore(preTr, nextTr);
else tbody.appendChild(preTr);
// -- -- --可選項 實現移動 保持序號不變-- -- -- -- -- --
// 1.獲取當前tr 第一個td的內容
// var num = tr.cells[0].innerHTML;
// 2. 將當前tr 第一個td的內容 賦值為 前一個tr的第一個td的內容
// tr.cells[0].innerHTML = preTr.cells[0].innerHTML;
// 3. 將前一個tr的第一個td內容賦值 為 當前tr第一個td的內容
// preTr.cells[0].innerHTML = num;
// 4. 實現原理 類似於變量值交換，每次移動時將當前tr和前一個tr各自的第一個td內容進行交換即可，因為這里是向上的
}
function down(obj) {
// 1.獲取當前tr
var tr = obj.parentNode.parentNode;
// 2. 通過當前tr獲取tbody
var tbody = tr.parentNode;
// 3.循環tbody每一行 找出和當前tr等於的元素 並將索引給rowidx變量
var rowIdx = 0;
for (var i = 0; i < tbody.rows.length; i++) {
if (tbody.rows[i] == tr) {
rowIdx = i;
break;
}
}
// 4.判斷 如果索引和tbody總行長度 相等 那么就是說 當前tr處於最后一行不能向下移動了，直接返回
// -1 是因為length的長度是從1開始算的，而索引是從0開始算的，所以-1 兩個值才對等
if (rowIdx == tbody.rows.length - 1) return alert('已經是最后一行了');
// 5.獲取當前tr的下一個tr
var nextTr = tbody.rows[rowIdx + 1];
// 6.獲取下一個tr 的 下一個tr
var nextTrSibling = nextTr.nextSibling;
// 7.移除當前tr
tbody.removeChild(tr);
// 8. 判斷是否存在下個tr的下個tr 存在則將當前tr 插入在他的之前
if (nextTrSibling) tbody.insertBefore(tr, nextTrSibling);
else tbody.appendChild(tr);
// 9.如果沒有就證明 我在倒數第二行 那就直接追加就好了
// -- -- --可選項 實現移動 保持序號不變 -- -- -- -- -- --
// 實現原理：采用交換變量的原理，都是交換內容來實現保持序號不變，只不過這里是和當前tr的下一個tr的第一個td交換
// var num = tr.cells[0].innerHTML;
// tr.cells[0].innerHTML = nextTr.cells[0].innerHTML;
// nextTr.cells[0].innerHTML = num;
}
// 上面是封裝的實現代碼，下面是獲取up元素 和 down 按鈕元素 分別添加事件偵聽
// 1.偵聽 當html加載完時執行函數內代碼
window.onload = function() {
// 2。 分別獲取up類和down類元素， 各自添加事件
Array.from(document.querySelectorAll('.up')).forEach((el, i) => {
el.onclick = function() {
up(this);
}
}, false);
// 在這里Array.from的作用是為了將元素集合數組轉換成數組，這樣才能使用數組的遍歷方法
// 也可以采用傳統的for循環元素添加事件
Array.from(document.querySelectorAll('.down')).forEach((el, i) => {
el.onclick = function() {
down(this);
}
}, false);
}
</script>
</head>
<body>
<table border="1" width="300" height="200" align="center">
<thead>
<tr>
<td>序號</td>
<td>名字</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>曉曉</td>
<td><button class="up">↑</button><button class="down">↓</button></td>
</tr>
<tr>
<td>2</td>
<td>瀟瀟</td>
<td><button class="up">↑</button><button class="down">↓</button></td>
</tr>
<tr>
<td>3</td>
<td>萱萱</td>
<td><button class="up">↑</button><button class="down">↓</button></td>
</tr>
</tbody>
</table>
</body>
</html>