jQuery BootStrap选中表格行及表格行上下移动

最新推荐文章于 2021-11-09 16:20:53 发布

mutoujz

最新推荐文章于 2021-11-09 16:20:53 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签：前端表格

本文链接：https://blog.csdn.net/mutoujz/article/details/89238688

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
	.selectBox {
		width: 600px;
		height:200px;
		margin: 60px auto;		
	}
	.leftBox{
		width: 70%;
		height:100%;
	}
	.rightBox{
		width: 30%;
		height:100%;
		padding-left:50px;
	}
	.rightBox a.btn{
		display:block;
		width:60px;
		margin-bottom:10px;
	}		
</style>
 
</head>
<body>	

<!--主内容-->
<div class="content-box">
  <!-- Main content -->
  <div class="content content-body" id="table-content">
    <div class="selectBox clearfix">
      <!--左边-->
      <div class="leftBox pull-left">
        <table class="table table-bordered table-hover text-nowrap content-table">
          <tbody>
            <tr>
              <td>临床生化室</td>
              <td>2018-04-25</td>								
            </tr>
            <tr>
              <td>临床免疫室</td>
              <td>2018-04-18</td>								
            </tr>
            <tr>
              <td>临床微生物室</td>
              <td>2018-04-10</td>								
            </tr>
            <tr>
              <td>临床生物化学室</td>
              <td>2018-03-29</td>								
            </tr>
          </tbody>
        </table>
      </div>					
      <!--右边-->
      <div class="rightBox pull-left">
        <a class="btn btn-default top" href="javascript:void(0);">置顶</a>
        <a class="btn btn-default up" href="javascript:void(0);">上移</a>
        <a class="btn btn-default down" href="javascript:void(0);">下移</a>
        <a class="btn btn-default bottom" href="javascript:void(0);">置底</a>
      </div>					
    </div>				
  </div>
</div>

<script>
  $(function() {
    //表格点击高亮事件
    $(document).on('click', '#table-content .content-table > tbody > tr', function() {
      if($(this).hasClass("showColor") == false){
        $(this).addClass('showColor').css("background-color", "#f5f5f5");
        $(this).siblings().removeClass('showColor').css("background-color", "white");
      }					
    });
    //置顶
    var $top = $(".top");
    $top.click(function() {
      var flag = false;
      $('#table-content .content-table > tbody').find('tr').each(function(){
        if($(this).hasClass('showColor')){
          flag = true;	
          if($(this).index() == 0){
            alert('已经是最顶部了！');
            return;
          }
          $(".content-table").prepend($(this));
          $(this).css("background-color", "#d5d5d5");
          $(this).siblings().css("background-color", "white");					
          return false;
        }						
      });					
      if(flag == false){
        alert('请选择一行数据！');
        return;
      }	
    });				
    //上移
    var $up = $(".up")
    $up.click(function() {	
      var flag = false;					
      $('#table-content .content-table > tbody').find('tr').each(function(){
        if($(this).hasClass('showColor')){
          flag = true;	
          if($(this).index() == 0){
            alert('已经是第一个了！');
            return;
          }
          $(this).prev().before($(this));							
          $(this).css("background-color", "#d5d5d5");
          $(this).siblings().css("background-color", "white");							
          return false;
        }						
      });					
      if(flag == false){
        alert('请选择一行数据！');
        return;
      }	
    });
    //下移
    var trLen=$('#table-content .content-table > tbody > tr').length;	
    var $down = $(".down");				
    $down.click(function() {									
      var flag = false;					
      $('#table-content .content-table > tbody').find('tr').each(function(){
        if($(this).hasClass('showColor')){
          flag = true;	
          if($(this).index() == trLen - 1){
            alert('已经是最后一个了！');
            return;
          }
          $(this).next().after($(this));
          $(this).css("background-color", "#d5d5d5");
          $(this).siblings().css("background-color", "white");					
          return false;
        }						
      });					
      if(flag == false){
        alert('请选择一行数据！');
        return;
      }
    });
    //置底
    var $bottom = $(".bottom");				
    $bottom.click(function() {
      var flag = false;
      $('#table-content .content-table > tbody').find('tr').each(function(){
        if($(this).hasClass('showColor')){
          flag = true;	
          if($(this).index() == trLen - 1){
            alert('已经是最底部了！');
            return;
          }
          $(this).fadeOut().fadeIn();
          $(".content-table").append($(this));
          $(this).css("background-color", "#d5d5d5");
          $(this).siblings().css("background-color", "white");						
          return false;
        }						
      });					
      if(flag == false){
        alert('请选择一行数据！');
        return;
      }	
    });		
    
  });
</script>
</body>
</html>

参考：https://blog.csdn.net/zyg1515330502/article/details/81978056

mutoujz

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery BootStrap选中表格行及表格行上下移动

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title> <!-- 最新版本的 Bootstrap 核心 ...
复制链接

扫一扫

专栏目录