欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年02月24日 11:58:13   作者：??悲宸???  
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)表格的隔行變色和上下移動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了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代碼

?//隔行變色 ? ? ?//這里如果感覺麻煩就封裝進(jìn)一個方法里
? ? $('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ù)放進(jìn)表格中
? ? ? ? ? ? $('#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)文章

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

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

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

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

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

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

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

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

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

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

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

    JS location幾個方法小姐

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

    egg.js的基本使用實例

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

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

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

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

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

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

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

最新評論