Javascript 使用角度指令使表格中的单元格可单击

回答这个问题需要Angularjs指令和jquery方面的专业知识

我正在显示一个简单的表。我想要的是当用户点击任何单元格时。。它应该被选中，然后用户应该能够使用键盘操纵光标

有人知道如何做到这一点吗

请点击此处：

---

我用叉子叉起并更新了你的扑克牌。实际上，我使用自定义指令创建了相同类型的表。如果你在做一个表格，你应该使用语义标记。这就是为什么我修改了你的HTML

然后，我更新了select me指令，向您展示了我是如何完成单击时的自动选择以及如何实现箭头键导航的

layout.html

---

谢谢你。。这看起来很简单，也很简单works@glepretre..could你还建议我如何在单元格之间引入移动？@JamesHans我在行和列上添加了属性来索引它们。我向你展示了如何将它们纳入你的指令。我让您获得正确的输入，以继续使用jQlite或jQuery，并在第一行和最后一行（idem for column）处理特定情况；请别忘了给我投票P

<table>
  <thead>
    <tr ng-repeat="element in header" class="header-cells" style="width:{{element.width}}px">
      <th>{{element.column}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="element in body" data-indexrow="{{$index}}">
      <td ng-repeat="h in header" class="custom-row" data-indexcol="{{$index}}">
        <input type="text" ng-model="element[h.column]" class="body-cell" style="width:{{h.width}}px" select-me>
      </td>
    </tr>
  </tbody>
</table>

ct.directive("selectMe", function() {
  return ({
    restrict: "A",
    //    templateUrl: 'sortdropdown.html',
    link: link
  });

  function link(scope, element, attributes) {

    element.on('click', function(e) {
      element.select();
    });

    element.on('keyup', function(e) {
      var $input = angular.element(this),
          $td = $input.parent(),
          $tr = $td.parent(),
          indexrow = parseInt($tr.attr('data-indexrow'),10),
          indexcol = parseInt($td.attr('data-indexcol'),10);

      console.log(indexrow);
      console.log(indexcol);

      // up arrow
      if (e.keyCode === 38) {
        //move up
      }
      // down arrow
      if (e.keyCode === 40) {
        //move down
      }
      // left arrow
      if (e.keyCode === 37) {
        //move left
      }
      // right arrow
      if (e.keyCode === 39) {
        //move right
      }
    });
  }
});