开发者

jQuery // Moving up and down on Arrow Down event

I'm trying to replicate the same event you can do inside ms access datagrid where you can use the arrow up and down to move from a row. As for a example I only showed 2 rows but it could be much more.

I've got the following HTML

<div class="cell celldata cell_service_data" id="cell_service_rate_1">
<input type="tex开发者_运维技巧t" 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>

And the 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;
  }
});

So my question is how can I in jquery put inside the arrow.down case the following logic.

nextcell = cell_service_rate_1 + 1 and should equal cell_service_rate_2


If I understand correctly can't you just do like i = 1... nextcell = "cell_service_rate" + i;

EDIT Using parseInt() this jsfiddle works doing what I think you want. I still think it's more elegant to have from the start some i counter to create the strings though.

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

EDIT

And HERE is an example of more what I think you should be doing, by having an index (in this case the 'rel' attribute)

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


Something similar to this?

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;

Better would be to detect the last occurence of the underscore of your rateId, rather than doing a substr(-1) because this just works for 0-9. But I'm sure you get the idea.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜