JQuery實(shí)現(xiàn)表格數(shù)據(jù)行上移與下移

更新時(shí)間：2022年02月22日 09:04:24 作者：蚩尤后裔

這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)表格數(shù)據(jù)行上移與下移，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JQuery實(shí)現(xiàn)表格數(shù)據(jù)行上移與下移的具體代碼，供大家參考，具體內(nèi)容如下

效果展示

代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>Bootstrap 實(shí)例 - 條紋表格</title>
? ? <link rel="stylesheet" >
? ? <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
? ? <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
?
? ? <style type="text/css">
? ? ? ? .moveUpOrDown {
? ? ? ? ? ? background-color: #5BC0DE;
? ? ? ? ? ? border-radius: 3px;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? color: #FFFFFF;
? ? ? ? ? ? padding: 2px;
? ? ? ? ? ? font-size: 12px;
? ? ? ? }
? ? </style>
?
? ? <script type="text/javascript">
? ? ? ? $(function () {
? ? ? ? ? ? /**
? ? ? ? ? ? ?* 為 上移 、下移 按鈕綁定點(diǎn)擊事件
? ? ? ? ? ? ?*/
? ? ? ? ? ? $("body").on("click", ".moveUpOrDown", function () {
? ? ? ? ? ? ? ? var text = $(this).text();
? ? ? ? ? ? ? ? if (text == "上移") {
? ? ? ? ? ? ? ? ? ? var prevTr = $(this).parent().parent().prevAll();
? ? ? ? ? ? ? ? ? ? /**如果當(dāng)前行不是第一行，則上移它*/
? ? ? ? ? ? ? ? ? ? if (prevTr.length > 0) {
? ? ? ? ? ? ? ? ? ? ? ? var preTemp = prevTr.first();
? ? ? ? ? ? ? ? ? ? ? ? var thisHr = $(this).parent().parent();
? ? ? ? ? ? ? ? ? ? ? ? /**將上一行與本行交互內(nèi)容，replaceWith 方法內(nèi)容為 html 內(nèi)容
? ? ? ? ? ? ? ? ? ? ? ? ?* 可參考文檔：http://www.w3school.com.cn/jquery/manipulation_replacewith.asp*/
? ? ? ? ? ? ? ? ? ? ? ? thisHr.replaceWith("<tr>" + preTemp.html() + "</tr>");
? ? ? ? ? ? ? ? ? ? ? ? preTemp.replaceWith("<tr>" + thisHr.html() + "</tr>");
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else if (text == "下移") {
? ? ? ? ? ? ? ? ? ? var nextTr = $(this).parent().parent().next();
? ? ? ? ? ? ? ? ? ? if (nextTr.length > 0) {
? ? ? ? ? ? ? ? ? ? ? ? var thisHr = $(this).parent().parent();
? ? ? ? ? ? ? ? ? ? ? ? /**將本行與下一行交互內(nèi)容，replaceWith 方法內(nèi)容為 html 內(nèi)容 */
? ? ? ? ? ? ? ? ? ? ? ? thisHr.replaceWith("<tr>" + nextTr.html() + "</tr>");
? ? ? ? ? ? ? ? ? ? ? ? nextTr.replaceWith("<tr>" + thisHr.html() + "</tr>");
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? });
? ? </script>
?
</head>
<body>
?
<table class="table table-striped">
? ? <caption>條紋表格布局</caption>
? ? <thead>
? ? <tr>
? ? ? ? <th>名稱</th>
? ? ? ? <th>城市</th>
? ? ? ? <th>郵編</th>
? ? ? ? <th>排序</th>
? ? </tr>
? ? </thead>
? ? <tbody>
? ? <tr>
? ? ? ? <td>Tanmay1</td>
? ? ? ? <td>Bangalore</td>
? ? ? ? <td>560001</td>
? ? ? ? <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
? ? </tr>
? ? <tr>
? ? ? ? <td>Sachin1</td>
? ? ? ? <td>Mumbai</td>
? ? ? ? <td>400003</td>
? ? ? ? <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
? ? </tr>
? ? <tr>
? ? ? ? <td>Uma1</td>
? ? ? ? <td>Pune</td>
? ? ? ? <td>411027</td>
? ? ? ? <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
? ? </tr>
? ? <tr>
? ? ? ? <td>Tanmay2</td>
? ? ? ? <td>Bangalore</td>
? ? ? ? <td>560001</td>
? ? ? ? <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
? ? </tr>
? ? <tr>
? ? ? ? <td>Sachin2</td>
? ? ? ? <td>Mumbai</td>
? ? ? ? <td>400003</td>
? ? ? ? <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
? ? </tr>
? ? <tr>
? ? ? ? <td>Uma2</td>
? ? ? ? <td>Pune</td>
? ? ? ? <td>411027</td>
? ? ? ? <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
? ? </tr>
? ? <tr>
? ? ? ? <td>Tanmay3</td>
? ? ? ? <td>Bangalore</td>
? ? ? ? <td>560001</td>
? ? ? ? <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
? ? </tr>
? ? <tr>
? ? ? ? <td>Sachin3</td>
? ? ? ? <td>Mumbai</td>
? ? ? ? <td>400003</td>
? ? ? ? <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
? ? </tr>
? ? <tr>
? ? ? ? <td>Uma3</td>
? ? ? ? <td>Pune</td>
? ? ? ? <td>411027</td>
? ? ? ? <td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td>
? ? </tr>
? ? </tbody>
</table>
?
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: