js實(shí)現(xiàn)表格的隔行變色和上下移動(dòng)

更新時(shí)間：2022年02月24日 11:58:13 作者：??悲宸???

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)表格的隔行變色和上下移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)表格的隔行變色和上下移動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

話不多說(shuō)，先看效果圖：

點(diǎn)擊上移或下移

table樣式：

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

表格代碼：

<body>
? ? <h3>三國(guó)英雄人物排行榜</h3>
? ? <input type="button" value="我來(lái)添加英雄" 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代碼

?//隔行變色 ? ? ?//這里如果感覺麻煩就封裝進(jìn)一個(gè)方法里
? ? $('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下的長(zhǎng)度，即是，每個(gè)tr下td里面的序號(hào)
? ? ? ? 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ù)放進(jìn)表格中
? ? ? ? ? ? $('#tab').append(name)
? ? ? ? }
? ? ? ? heroName.keyCode=function(){ ? ?//鍵盤點(diǎn)價(jià)事件
? ? ? ? ? ? let e=window.event
? ? ? ? ? ? ? ? if (e.keyCode==13){ ? ? //回車后，自動(dòng)提交
? ? ? ? ? ? ? ? ? ? tab.submit()
? ? ? ? ? ? ? ? }
? ? ? ? }
? ? ? ? $('tr:even').children().css('background-color','#f4fe56')
? ? ? ? $('tr:odd').children().css('background-color','#fe9d88')
? ? })

? ? //上移--jq實(shí)現(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
? ? ? ? }
? ? ? ? //交換兩個(gè)td的文本值
? ? ? ? var t=td1.html();
? ? ? ? td1.html(td2.html())
? ? ? ? td2.html(t)
? ? }
? ? //下移--js實(shí)現(xiàn)
? ? function down(btn) {
? ? ? ? //獲取當(dāng)前行的td
? ? ? ? var td1=btn.parentElement.previousElementSibling
? ? ? ? //獲取下一行的td
? ? ? ? var td2=btn.parentElement.parentElement.nextElementSibling.firstElementChild.nextElementSibling
? ? ? ? //交換兩個(gè)td的文本值
? ? ? ? var t=td1.innerHTML;
? ? ? ? td1.innerHTML=td2.innerHTML
? ? ? ? td2.innerHTML=t
? ? }

記得不要忘記添加jq的包喲

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

js實(shí)現(xiàn)表格的隔行變色和上下移動(dòng)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具