亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

?//隔行變色 ? ? ?//這里如果感覺(jué)麻煩就封裝進(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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript學(xué)習(xí)筆記之圖片庫(kù)案例分析

    JavaScript學(xué)習(xí)筆記之圖片庫(kù)案例分析

    這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之圖片庫(kù)案例,結(jié)合具體實(shí)例形式分析了javascript圖片庫(kù)相關(guān)的頁(yè)面元素動(dòng)態(tài)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-01-01
  • 原生js實(shí)現(xiàn)圖片層疊輪播切換效果

    原生js實(shí)現(xiàn)圖片層疊輪播切換效果

    這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)圖片層疊輪播切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-02-02
  • google廣告之另類js調(diào)用實(shí)現(xiàn)代碼

    google廣告之另類js調(diào)用實(shí)現(xiàn)代碼

    這篇文章主要介紹了google廣告之另類js調(diào)用實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2020-08-08
  • JS FormData上傳文件的設(shè)置方法

    JS FormData上傳文件的設(shè)置方法

    使用FormData上傳文件時(shí)，總是獲取不到req.file對(duì)象。發(fā)現(xiàn)是沒(méi)有配置對(duì)FormData導(dǎo)致的，怎么解決這個(gè)問(wèn)題呢？下面小編給大家?guī)?lái)了JS FormData上傳文件的設(shè)置方法，需要的朋友參考下吧
    2017-07-07
  • js 動(dòng)態(tài)生成html 觸發(fā)事件傳參字符轉(zhuǎn)義的實(shí)例

    js 動(dòng)態(tài)生成html 觸發(fā)事件傳參字符轉(zhuǎn)義的實(shí)例

    下面小編就為大家?guī)?lái)一篇js 動(dòng)態(tài)生成html 觸發(fā)事件傳參字符轉(zhuǎn)義的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-02-02
  • JS location幾個(gè)方法小姐

    JS location幾個(gè)方法小姐

    整理下面的方法，利用使用js獲取url參數(shù)的朋友
    2008-07-07
  • egg.js的基本使用實(shí)例

    egg.js的基本使用實(shí)例

    本文主要介紹了egg.js的基本使用實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • JS實(shí)現(xiàn)彈出浮動(dòng)窗口(支持鼠標(biāo)拖動(dòng)和關(guān)閉)實(shí)例詳解

    JS實(shí)現(xiàn)彈出浮動(dòng)窗口(支持鼠標(biāo)拖動(dòng)和關(guān)閉)實(shí)例詳解

    這篇文章主要介紹了JS實(shí)現(xiàn)彈出浮動(dòng)窗口,可支持鼠標(biāo)拖動(dòng)和關(guān)閉的功能,界面美觀大方,涉及javascript動(dòng)態(tài)創(chuàng)建對(duì)話框的相關(guān)技巧,需要的朋友可以參考下
    2015-08-08
  • OpenLayers加載縮放控件使用方法詳解

    OpenLayers加載縮放控件使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了OpenLayers加載縮放控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • BootstrapTable請(qǐng)求數(shù)據(jù)時(shí)設(shè)置超時(shí)(timeout)的方法

    BootstrapTable請(qǐng)求數(shù)據(jù)時(shí)設(shè)置超時(shí)(timeout)的方法

    使用bootstrapTable獲取數(shù)據(jù)時(shí)，有時(shí)由于網(wǎng)絡(luò)或者服務(wù)器的原因，無(wú)法及時(shí)獲取到數(shù)據(jù)，頁(yè)面顯示一直處于等待狀態(tài)。為了改善效果，考慮設(shè)置超時(shí)，請(qǐng)求發(fā)送后超時(shí)即顯示無(wú)數(shù)據(jù)，過(guò)段時(shí)間重新發(fā)起請(qǐng)求
    2017-01-01

最新評(píng)論