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

Question

我不知道

如何从中间做红色单元格，从键盘箭头上下移动。她需要停在排的末尾。有人可以帮助我吗？这是我需要做的正确的代码吗？

<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>

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(，因此我们需要为您的中间单元格添加一个id：

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

然后更改您的函数以选择它：

<script>
$( function() {
  $("#middle-cell").click( function() {
    $("#middle-cell").css('background', 'red')
  } );
} );
</script>