在加载ajax后，仅使用键盘箭头在表格中移动1个单元格

问题描述 投票：1回答：3

大家晚上好，

我有这个问题：当我通过ajax加载页面（在键盘上带有箭头键的表格选择器）时，活动单元格正在移动2个单元格。我希望它只移动1个单元格。如果我重新加载页面（再次使用ajax，活动单元格移动3个单元格，依此类推......但是当我按下一个按钮时，它只移动一个单元格（我也想用箭头键进行）。

我创建了一个小例子，确实产生了同样的问题。它是用PHP编写的，所以它可以放在一个页面..你们都可以尝试在你的网站上的php文件，或者你可以在这里测试它：http://leslip.be/test/test/test.php

php-code的作用基本上是创建2个文件，这些文件使用ajax转发给对方。这是php代码：

<?php
if (isset($_GET["url"])) $url = $_GET["url"];
    else $url = "home";
?>
<html>
    <head>
        <style>
            .selected { background-color: red; }
        </style>
        <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script type="text/javascript">

$(document).ready(function () {
  $(".to_table").click(function() {
    $.ajax({
      cache: false,
      url: "<?php print $_SERVER['PHP_SELF']; ?>",
      data: "url=table",
      success: function(response) {
        $("body").html(response);
	  	}
    });
  });
  $(".to_home").click(function() {
    $.ajax({
        cache: false,
        url: "<?php print $_SERVER['PHP_SELF']; ?>",
        success: function(response) {
          $("body").html(response);
        }
    });
  });
  $(".move").click(function() {
    $('.selected').removeClass('selected').next('td').addClass('selected');
  });
    $(document).keydown(function(key) {
        if (key.which == 39) {
            $('.selected').removeClass('selected').next().addClass('selected');
        }
    });
});
            
        </script>
    </head>
    <body>
<?php
    if ($url == "home") print "
            <div class=\"site\">
                <div class=\"to_table\">go to table</div>
            </div>
    ";
    elseif ($url == "table") print "
        <div class=\"to_home\">go to home</div>
        <div>
            <table style=\"border: 1px solid black;\">
                <tr>
                    <td class=\"selected\" style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                </tr>
            </table>
        </div>
        <div class=\"move\">move selected td</div>
    ";
?>
    </body>
</html>
php jquery ajax html-table arrow-keys
3个回答
1
投票

请考虑以下代码示例。

$(function() {
  function getTable() {
    $.ajax({
      cache: false,
      url: "/test/test/test.php",
      data: "url=table",
      success: function(response) {
        $("body").html(response);
      }
    });
  }

  function returnHome() {
    $.ajax({
      cache: false,
      url: "/test/test/test.php",
      success: function(response) {
        $("body").html(response);
      }
    });
  }

  function prev() {
    if ($('.selected').index() == 0) {
      return;
    }
    $('.selected')
      .removeClass('selected')
      .prev()
      .addClass('selected');
  }

  function next() {
    var c = $("td.selected").siblings().length;
    if ($('.selected').index() >= c) {
      return;
    }
    $('.selected')
      .removeClass('selected')
      .next()
      .addClass('selected');
  }

  function move(e) {
    if ($(e.target).hasClass("next")) {
      next();
    } else {
      prev();
    }
  }

  $(".to_table").on('click', getTable);
  $(".to_home").on('click', returnHome);
  $(".move").on('click', move);
  $(document).keydown(function(key) {
    if (key.which == 39) {
      next();
    }
    if (key.which == 37) {
      prev();
    }
  });
});
.selected {
  background-color: red;
}

.button {
  padding: .2em .4em;
  background: #ccc;
  border-radius: 3px;
  display: inline;
  cursor: pointer;
}
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div class="to_home button">go to home</div>
<div>
  <table style="border: 1px solid black; margin: 5px;">
    <tbody>
      <tr>
        <td class="selected" style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="move prev button">&lt;</div>
<div class="move next button">&gt;</div>

设置函数可能更好，因为我们可以从UI的不同部分调用它们。看起来你想要一个按钮点击或按键来向一个方向或另一个方向驱动“光标”。我添加了prev以期待潜在的需求。

Move函数只是帮助我们更轻松地分配事件回调。使用.on()允许我们将回调函数绑定到当前不可用的元素上的事件。由于它们是从Ajax调用创建的，因此这是一种更好的管理方式。

现在，click事件和击键事件调用移动光标的相同功能。我还添加了一个限制器，因此光标不能移动到边缘之外。这是利用.index()得到0和兄弟姐妹数量之间的表中当前单元格的索引，在本例中为8。

我希望有所帮助！

$(function() {
  function getTable() {
    $.ajax({
      cache: false,
      url: "/test/test/test.php",
      data: "url=table",
      success: function(response) {
        $("body").html(response);
      }
    });
  }

  function returnHome() {
    $.ajax({
      cache: false,
      url: "/test/test/test.php",
      success: function(response) {
        $("body").html(response);
      }
    });
  }

  function prev() {
    if ($('.selected').index() == 0) {
      return;
    }
    $('.selected')
      .removeClass('selected')
      .prev()
      .addClass('selected');
  }

  function next() {
    var c = $("td.selected").siblings().length;
    if ($('.selected').index() >= c) {
      return;
    }
    $('.selected')
      .removeClass('selected')
      .next()
      .addClass('selected');
  }

  function up() {
    var row = $(".selected").parent();
    var cInd = $(".selected").index();
    if (row.index() == 0) {
      return;
    }
    $(".selected").removeClass("selected");
    row
      .prev()
      .find("td").eq(cInd)
      .addClass("selected");
  }

  function down() {
    var row = $(".selected").parent();
    var cInd = $(".selected").index();
    if (row.index() >= row.siblings().length) {
      return;
    }
    $(".selected").removeClass("selected");
    row
      .next()
      .find("td").eq(cInd)
      .addClass("selected");
  }

  function wrap(d) {}

  function move(e) {
    var cls = $(e.target).attr("class").split(" ").join("");
    cls = cls.replace("move", "");
    cls = cls.replace("button", "");
    switch (cls) {
      case "next":
        next();
        break;
      case "prev":
        prev();
        break;
      case "up":
        up();
        break;
      case "down":
        down();
        break;
    }
  }

  $(".to_table").on('click', getTable);
  $(".to_home").on('click', returnHome);
  $(".move").on('click', move);
  $(document).keydown(function(key) {
    if (key.which == 39) {
      next();
    }
    if (key.which == 37) {
      prev();
    }
    if (key.which == 38) {
      up();
    }
    if (key.which == 40) {
      down();
    }
  });
});
.selected {
  background-color: red;
}

.button {
  padding: .2em .4em;
  background: #ccc;
  border-radius: 3px;
  display: inline;
  cursor: pointer;
}
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div class="to_home button">go to home</div>
<div>
  <table style="border: 1px solid black; margin: 5px;">
    <tbody>
      <tr>
        <td class="selected" style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
      </tr>
      <tr>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
      </tr>
      <tr>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="move up button">/\</div>
<div class="move prev button">&lt;</div>
<div class="move next button">&gt;</div>
<div class="move down button">\/</div>
0
投票

谢谢你的回答。内部的好东西......但是当我使用箭头时，单元格正确移动，但是当我重新加载页面（转到主页，转到表格）并使用键盘上的箭头时，单元格再次跳过一个。再次重新加载页面，单元格现在跳过2，依此类推...看起来ajax多次加载键盘箭头移动的部分...但是再次，移动链接，效果很好。就像我的（不是那么好的编码）代码一样。

这个问题有解决方案吗？

例如：http://leslip.be/test/test/test2.php

0
投票

我找到了解决方案。不是最好的。当我打开网站时，网址中没有GET变量。所以我使用php检查这些，当没有，然后jquery“keydown”写在html-soure中。当存在GET变量时，禁用jquery代码“keydown”。

  <?php if (!isset($_GET["url"])) print "
$(document).keydown(function(key) {
    if (key.which == 39) {
        $('.selected').removeClass('selected').next().addClass('selected');
    }
}); "; ?>

所以这证实了我的想法，当我执行ajax请求时，keydown函数会被越来越多地加载。

所以仍然是同样的问题，我怎样才能以正确的方式阻止这种情况？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.