js實現(xiàn)表格的隔行變色和上下移動
更新時間：2022年02月24日 11:58:13 作者：??悲宸???
這篇文章主要為大家詳細介紹了js實現(xiàn)表格的隔行變色和上下移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)表格的隔行變色和上下移動的具體代碼，供大家參考，具體內(nèi)容如下
話不多說，先看效果圖：
點擊上移或下移
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>關(guān)羽</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();//文本框輸入的內(nèi)容去除空格
? ? ? ? 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) {
? ? ? ? //獲取當(dāng)前行的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) {
? ? ? ? //獲取當(dāng)前行的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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
本文將簡單實現(xiàn)一個覆蓋水印的小功能，水印一般都是添加在圖片上，然后直接加載處理過的圖片url即可，這里并沒有修改圖片，而是直接的在待添加水印的?dom?上添加一個?canvas?蒙版，需要的可以參考一下2022-12-12
Javascript中的this,bind和that使用實例
這篇文章主要介紹了Javascript中的this,bind和that使用實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
JSON.stringify(遞歸)與?JSON.parse(有限狀態(tài)自動機)的實現(xiàn)代碼
這篇文章主要介紹了JSON.stringify（遞歸）與?JSON.parse（有限狀態(tài)自動機）的實現(xiàn),本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了Bootstrap table兩種分頁示例，服務(wù)器端分頁和客戶端分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)下滑到底部自動翻頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
WEB 前端開發(fā)中防治重復(fù)提交的實現(xiàn)方法
這篇文章主要介紹了JS WEB 前端開發(fā)中防治重復(fù)提交的實現(xiàn)方法,涉及到表單提交的幾種方式介紹，非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-10-10
js 控制下拉菜單刷新的方法，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了JS中的一些常用的函數(shù)式編程術(shù)語,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，2019-06-06
這篇文章主要介紹了JS得到當(dāng)前時間的方法,結(jié)合具體實例形式對比分析了javascript獲取日期時間的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
關(guān)于TypeScript中import JSON的正確姿勢詳解
2012年10月首度對外公布typescript（當(dāng)時已經(jīng)是0.7？的版本）同時開源，ts的編譯器是用js編寫的（后來改成ts？），可以在線編寫。下面這篇文章主要給大家介紹了關(guān)于TypeScript中import JSON的正確姿勢，需要的朋友可以參考下。2017-07-07