js ---織り交ぜられた変色とテーブルの上下の動きを実現します

言うまでもありませんが、最初にレンダリングを見
ここに画像の説明を挿入します
てください。テーブルスタイルをクリックして上下に移動し

ます。

<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>

js ---織り交ぜられた変色とテーブルの上下の動きを実現します

おすすめ