js实现表格的隔行变色和上下移动
更新时间：2022年02月24日 11:58:13 作者：꧁এ悲宸๓₯㎕
这篇文章主要为大家详细介绍了js实现表格的隔行变色和上下移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现表格的隔行变色和上下移动的具体代码，供大家参考，具体内容如下
话不多说，先看效果图：
点击上移或下移
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()==''){ //去除输入值左右的空格后不等于空，就将数据放进表格中
$('#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实现
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实现
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文将简单实现一个覆盖水印的小功能，水印一般都是添加在图片上，然后直接加载处理过的图片url即可，这里并没有修改图片，而是直接的在待添加水印的 dom 上添加一个 canvas 蒙版，需要的可以参考一下2022-12-12
Javascript中的this,bind和that使用实例
这篇文章主要介绍了Javascript中的this,bind和that使用实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
JSON.stringify(递归)与 JSON.parse(有限状态自动机)的实现代码
这篇文章主要介绍了JSON.stringify（递归）与 JSON.parse（有限状态自动机）的实现,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了Bootstrap table两种分页示例，服务器端分页和客户端分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了微信小程序实现下滑到底部自动翻页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了JS WEB 前端开发中防治重复提交的实现方法,涉及到表单提交的几种方式介绍，非常不错具有参考借鉴价值，需要的朋友可以参考下2016-10-10
js 控制下拉菜单刷新的方法，需要的朋友可以参考一下2013-03-03
这篇文章主要介绍了JS中的一些常用的函数式编程术语,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，2019-06-06
这篇文章主要介绍了JS得到当前时间的方法,结合具体实例形式对比分析了javascript获取日期时间的相关操作技巧,需要的朋友可以参考下2017-03-03
关于TypeScript中import JSON的正确姿势详解
2012年10月首度对外公布typescript（当时已经是0.7？的版本）同时开源，ts的编译器是用js编写的（后来改成ts？），可以在线编写。下面这篇文章主要给大家介绍了关于TypeScript中import JSON的正确姿势，需要的朋友可以参考下。2017-07-07
最新评论