js实现表格的隔行变色和上下移动

本文实例为大家分享了js实现表格的隔行变色和上下移动的具体代码，供大家参考，具体内容如下

话不多说，先看效果图：

点击上移或下移

table样式：

表格代码：

    
三国英雄人物排行榜
    
    

        英雄：
    

    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
排名
人物

                操作
            
1
关羽

                

                
            
2
马超

                

                
            
3
吕布

                

                
            
4
典韦

                

                
            
5
张飞

                

                
            
6
赵云

                

                
            

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='\n' +
            '            '+length+'\n' +
            '            '+val+'\n' +
            '            \n' +
            '                
\n' +
            '                \n' +
            '            \n' +
            '        '
        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的包哟

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。