CODEWITHSUNDEEP
jquery
Yannick
Yannick

Reputation: 3663

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

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

Upvotes: 2

Views: 2134

Answers (2)

mazlix
mazlix

Reputation: 6313

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/

Upvotes: 2

Jules
Jules

Reputation: 7233

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.

Upvotes: 1

Related Questions