js實現(xiàn)表格的隔行變色和上下移動
更新時間：2022年02月24日 11:58:13 作者：??悲宸???
這篇文章主要為大家詳細介紹了js實現(xiàn)表格的隔行變色和上下移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)表格的隔行變色和上下移動的具體代碼，供大家參考，具體內容如下
話不多說，先看效果圖：
點擊上移或下移
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()==''){ ? //去除輸入值左右的空格后不等于空，就將數(shù)據(jù)放進表格中
? ? ? ? ? ? $('#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實現(xiàn)
? ? 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實現(xiàn)
? ? 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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JavaScript學習筆記之圖片庫案例,結合具體實例形式分析了javascript圖片庫相關的頁面元素動態(tài)操作實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細介紹了原生js實現(xiàn)圖片層疊輪播切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了google廣告之另類js調用實現(xiàn)代碼,需要的朋友可以參考下2020-08-08
使用FormData上傳文件時，總是獲取不到req.file對象。發(fā)現(xiàn)是沒有配置對FormData導致的，怎么解決這個問題呢？下面小編給大家?guī)砹薐S FormData上傳文件的設置方法，需要的朋友參考下吧2017-07-07
js 動態(tài)生成html 觸發(fā)事件傳參字符轉義的實例
下面小編就為大家?guī)硪黄猨s 動態(tài)生成html 觸發(fā)事件傳參字符轉義的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
整理下面的方法，利用使用js獲取url參數(shù)的朋友2008-07-07
本文主要介紹了egg.js的基本使用實例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
JS實現(xiàn)彈出浮動窗口(支持鼠標拖動和關閉)實例詳解
這篇文章主要介紹了JS實現(xiàn)彈出浮動窗口,可支持鼠標拖動和關閉的功能,界面美觀大方,涉及javascript動態(tài)創(chuàng)建對話框的相關技巧,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了OpenLayers加載縮放控件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
BootstrapTable請求數(shù)據(jù)時設置超時(timeout)的方法
使用bootstrapTable獲取數(shù)據(jù)時，有時由于網(wǎng)絡或者服務器的原因，無法及時獲取到數(shù)據(jù)，頁面顯示一直處于等待狀態(tài)。為了改善效果，考慮設置超時，請求發(fā)送后超時即顯示無數(shù)據(jù)，過段時間重新發(fā)起請求2017-01-01