jQuery //向上和向下移动Arrow Down事件

时间:2011-07-19 18:04:55

标签: jquery

我正在尝试复制您在ms访问数据网格中可以执行的相同事件,您可以使用向上和向下箭头从一行移动。至于一个例子,我只显示了2行但可能更多。

我有以下HTML

<div class="cell celldata cell_service_data" id="cell_service_rate_1">
<input type="text" id="rate_service_row_1" class="rate_service_row"/>
</div>
<div class="cell celldata cell_service_data" id="cell_service_rate_2">
    <input type="text" id="rate_service_row_2" class="rate_service_row"/>
</div>

和jQuery

$('.rate_service_row').keydown(function (e) {
    var rateId = $(this).attr('id');

  var keyCode = e.keyCode || e.which,
      arrow = {left: 37, up: 38, right: 39, down: 40 };

  switch (keyCode) {
    case arrow.left:
      //..
    break;
    case arrow.up:
      //..
    break;
    case arrow.right:
      //..
    break;
    case arrow.down:
         //Set focus to the same cell next row
    break;
  }
});

所以我的问题是如何在jquery中将arrow.down案例放入以下逻辑中 nextcell = cell_service_rate_1 + 1,应该等于cell_service_rate_2

2 个答案:

答案 0 :(得分:2)

如果我理解正确,你就不能像i = 1 ... nextcell = "cell_service_rate" + i;

那样

EDIT 使用parseInt(),jsfiddle可以按照我的想法进行操作。我仍然认为从一开始我就会更优雅地创建字符串。

http://jsfiddle.net/mazlix/byjmF/3/

修改

HERE是我认为你应该做的更多的例子,有一个索引(在这种情况下是'rel'属性)

http://jsfiddle.net/mazlix/byjmF/9/

答案 1 :(得分:1)

类似的东西?

var rateId = $(this).attr('id');
//Get the number of the currently selected cell
var curCell = rateId.substr(-1);

... code ...
case arrow.down:
     //Go one row lower.. so plus 1
     var newCell = curCell + 1;
     //Define the new identifier
     var newCellId = 'rate_service_row_' + newCell;
     var element = $(newCellId);
     //Focus on the element if it exists (element.length checks that)
     if (element.length != 0) {
          element.focus();
     }
break;

最好是检测你的rateId下划线的最后一次出现,而不是做一个substr(-1)因为这只适用于0-9。但我相信你明白了。