Question

由于CSS网格没有行包装器的概念，我将如何实现一项功能，使行可以向上移动一行呢？

通常，我会抓住一行父母，并用JS（appendChild等）来改变dom。但不确定如何在CSS网格中执行此操作。至少不是以一种干净的方式。

我想我可以抓住6个跨度并通过用JS将它们全部向上移动来改变dom，但是用6个跨度来做到这一点似乎并不干净。

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid black;
    border-right: 1px solid black;
}

.grid > span {
    padding: 8px 4px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}

  <body>
<div class="grid">
        <span><strong>Id</strong></span>
        <span><strong>Full Name</strong></span>
        <span><strong>Country</strong></span>
        <span><strong>Created at</strong></span>
        <span><strong>Email</strong></span>
        <span><strong></strong></span>
        <span>0</span>
        <span>Aaron Kris</span>
        <span>Philippines</span>
        <span>1991-05-23T14:19:51</span>
        <span>Ophelia_Mitchell@karley.name</span>
        <span><button>move row up</button></span>
  
        <span>1</span>
        <span>Simeon McLaughlin</span>
        <span>Singapore</span>
        <span>2012-03-07T00:08:36</span>
        <span>Simon@salvatore.biz</span>
        <span><button>move row up</button></span>
        
        
        
        
        <span>2</span>
        <span>Kelsie Shanahan</span>
        <span>Brazil</span>
        <span>1985-03-10T20:13:04</span>
        <span>Karianne@salvatore.biz</span>
        <span><button>move row up</button></span>
    </div>
  </body>

Answer 1

我试图得到你的结果

$(document).ready(function(e) {
    $('button').on('click', function(){
		var allspn=$('.grid>span').length;
		var selfpos=$(this).parent('span').index();
		var span6=$('.grid>span').eq(selfpos);
		var span5=$('.grid>span').eq(selfpos-1);
		var span4=$('.grid>span').eq(selfpos-2);
		var span3=$('.grid>span').eq(selfpos-3);
		var span2=$('.grid>span').eq(selfpos-4);
		var span1=$('.grid>span').eq(selfpos-5);
		
		if($(this).parent('span').index()>11){
		$(span6).insertBefore($('.grid>span').eq(selfpos-11));
		$(span5).insertBefore($('.grid>span').eq(selfpos-11));
		$(span4).insertBefore($('.grid>span').eq(selfpos-11));
		$(span3).insertBefore($('.grid>span').eq(selfpos-11));
		$(span2).insertBefore($('.grid>span').eq(selfpos-11));
		$(span1).insertBefore($('.grid>span').eq(selfpos-11));
		}
		})
});

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid black;
    border-right: 1px solid black;
}

.grid > span {
    padding: 8px 4px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
<div class="grid">
        <span><strong>Id</strong></span>
        <span><strong>Full Name</strong></span>
        <span><strong>Country</strong></span>
        <span><strong>Created at</strong></span>
        <span><strong>Email</strong></span>
        <span><strong></strong></span>
        <span>0</span>
        <span>Aaron Kris</span>
        <span>Philippines</span>
        <span>1991-05-23T14:19:51</span>
        <span>Ophelia_Mitchell@karley.name</span>
        <span><button>move row up</button></span>
  
        <span>1</span>
        <span>Simeon McLaughlin</span>
        <span>Singapore</span>
        <span>2012-03-07T00:08:36</span>
        <span>Simon@salvatore.biz</span>
        <span><button>move row up</button></span>
        
        
        
        
        <span>2</span>
        <span>Kelsie Shanahan</span>
        <span>Brazil</span>
        <span>1985-03-10T20:13:04</span>
        <span>Karianne@salvatore.biz</span>
        <span><button>move row up</button></span>
    </div>
</div>

CSS网格-向上移动的最佳方法？

1 个答案: