js實現表格的隔行變色和上下移動

2022-02-24 16:00:29

本文範例為大家分享了js實現表格的隔行變色和上下移動的具體程式碼，供大家參考，具體內容如下

話不多說，先看效果圖：

點選上移或下移

table樣式：

<style>
        table{
            border:1px solid greenyellow;
            width: 300px;
        }
        .hero{
            display: none;
        }
        .show{
            display: block;
        }
</style>

表格程式碼：

<body>
    <h3>三國英雄人物排行榜</h3>
    <input type="button" value="我來新增英雄" id="add1">
    <div class="hero">
        英雄：<input type="text" id="heroName">
    </div>

    <table id="tab">
        <tr>
            <td>排名</td>
            <td>人物</td>
            <td>
                操作
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>關羽</td>
            <td>
                <input type="button" onclick="up(this)" value="上移"/><br/>
                <input type="button" value="下移" onclick="down(this)">
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>馬超</td>
            <td>
                <input type="button" onclick="up(this)" value="上移"/><br/>
                <input type="button" value="下移" onclick="down(this)">
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>呂布</td>
            <td>
                <input type="button" onclick="up(this)" value="上移"/><br/>
                <input type="button" value="下移" onclick="down(this)">
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>典韋</td>
            <td>
                <input type="button" onclick="up(this)" value="上移"/><br/>
                <input type="button" value="下移" onclick="down(this)">
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>張飛</td>
            <td>
                <input type="button" onclick="up(this)" value="上移"/><br/>
                <input type="button" value="下移" onclick="down(this)">
            </td>
        </tr>
        <tr>
            <td>6</td>
            <td>趙雲</td>
            <td>
                <input type="button" onclick="up(this)" value="上移"/><br/>
                <input type="button" value="下移" onclick="down(this)">
            </td>
        </tr>
    </table>
</body>

JQuery程式碼

 //隔行變色      //這裡如果感覺麻煩就封裝進一個方法裡
    $('tr:even').children().css('background-color','#f4fe56')
    $('tr:odd').children().css('background-color','#fe9d88')
    //顯示輸入框
    $('#add1').click(function () {
        $('.hero').toggleClass('show')
    })
    //新增事件，新增英雄
    $('#heroName').blur(function () {
        let val = $(this).val().trim();//文字方塊輸入的內容去除空格
        let length = $('tr').length;    //獲取tr下的長度，即是，每個tr下td裡面的序號
        let name='<tr>n' +
            '            <td>'+length+'</td>n' +
            '            <td>'+val+'</td>n' +
            '            <td>n' +
            '                <input type="button" οnclick="up(this)" value="上移"/><br/>n' +
            '                <input type="button" value="下移" οnclick="down(this)">n' +
            '            </td>n' +
            '        </tr>'
        if (!val.trim()==''){   //去除輸入值左右的空格後不等於空，就將資料放進表格中
            $('#tab').append(name)
        }
        heroName.keyCode=function(){    //鍵盤點價事件
            let e=window.event
                if (e.keyCode==13){     //回車後，自動提交
                    tab.submit()
                }
        }
        $('tr:even').children().css('background-color','#f4fe56')
        $('tr:odd').children().css('background-color','#fe9d88')
    })

    //上移--jq實現
    function up(btn) {
        //獲取當前行的td
        var td1=$(btn).parent().prev()
        //var td1=btn.parentElement.previousElementSibling
        //獲取上一行的td
        var td2=$(btn).parent().parent().prev().children().eq(1)
        if(td2.html()=='人物'){
            return
        }
        //交換兩個td的文字值
        var t=td1.html();
        td1.html(td2.html())
        td2.html(t)
    }
    //下移--js實現
    function down(btn) {
        //獲取當前行的td
        var td1=btn.parentElement.previousElementSibling
        //獲取下一行的td
        var td2=btn.parentElement.parentElement.nextElementSibling.firstElementChild.nextElementSibling
        //交換兩個td的文字值
        var t=td1.innerHTML;
        td1.innerHTML=td2.innerHTML
        td2.innerHTML=t
    }

記得不要忘記新增jq的包喲

<script src="../jquery-3.3.1.min.js"></script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

js實現表格的隔行變色和上下移動

熱門文章