你好。我需要将所有表格中的红色从中间移动，不仅是左右，还是上下

Question

我不知道如何从键盘箭头中间的红色单元格上下移动。她需要在排的最后停下来。有谁能够帮我？这是我需要做的正确代码吗？

＆＃13;

＆＃13;

<style type="text/css">
td {
  width: 50px;
  text-align:center;
  background-color:blue;
}
.red{
  background: red;
}
}
</style>
<script
  src="http://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous">
</script>
<script>
$(function() {
  $('.middle').on("click", function() {
    $(this).addClass('red');
  });
  $(document).keyup(function( event ) {
    var index;
    if($('.middle').hasClass("red")){
      if(event.which==39){
        index = $('.middle').index("td");
        index = ~~index;
        index+=1;
        if($("td").length == index){
          index = 0;
        }
        $('.middle').insertAfter($("td").eq(index));
        //$center.insertAfter(index);
      } else if(event.which==37){
        index = $('.middle').index("td");
        index = ~~index;
        index-=1;
        $('.middle').insertBefore($("td").eq(index));
      }
    }
    event.preventDefault();
  });
});
</script>


<table border="1">
	<tr>
		<td >-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
	<tr>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
	<tr>
		<td>-</td>
		<td>-</td>
		<td class="middle">-</td>
		<td>-</td>
		<td>-</td>
	</tr>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

$(function() {
  $('.middle').on("click", function() {
    $(this).addClass('red');
  });
  $(document).keyup(function( event ) {
    var index;
    if($('.middle').hasClass("red")){
      if(event.which==39){
        index = $('.middle').index("td");
        index = ~~index;
        index+=1;
        if($("td").length == index){
          index = 0;
        }
        $('.middle').insertAfter($("td").eq(index));
        //$center.insertAfter(index);
      } else if(event.which==37){
        index = $('.middle').index("td");
        index = ~~index;
        index-=1;
        $('.middle').insertBefore($("td").eq(index));
      }
    }
    event.preventDefault();
  });
});

td {
  width: 50px;
  text-align:center;
  background-color:blue;
}
.red{
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
	<tr>
		<td >-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
	<tr>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
	<tr>
		<td>-</td>
		<td>-</td>
		<td class="middle">-</td>
		<td>-</td>
		<td>-</td>
	</tr>
  <tr>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
  <tr>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
</table>

Answer 2

根据评论，需要更改中间单元格（x = 3，y = 3）的颜色，因此我们需要为您添加new_game <- read.table(text="game_pk sv_id 440697 123456_789012 440698 123456_789012 440699 123456_789012",header=TRUE,stringsAsFactors=FALSE) existing_game <- read.table(text="game_pk sv_id NA NA 440698 NA 440699 123456_789012",header=TRUE,stringsAsFactors=FALSE) library(dplyr) anti_join(new_game,existing_game) game_pk sv_id 1 440698 123456_789012 2 440697 123456_789012 中间单元格：

id

然后更改您的功能以选择它：

...
<tr>
    <td>-</td>
    <td>-</td>
    <td id="middle-cell">-</td>
    <td>-</td>
    <td>-</td>
</tr>
...