Strange behaviour with loop in Javascript

Question

I've got a table-like structure with text inputs in which I am trying to make an entire row to be removed with all their children, but first passing the values of cells up one by one in the rows below to keep IDs numbering structure.

The table structure is like this:

<table cellpadding=0>
    <tr id="myRow1">
        <td id="#R1C1">
            <input class="myCell">
        </td>
        <td id="#R1C2">
            <input class="myCell">
        </td>
        <td id="#R1C3">
            <input class="myCell">
        </td>
        <td id="#R1C4">
            <input class="myCell">
        </td>
    </tr>
    <tr id="myRow2">
        <td id="#R2C1">
            <input class="myCell">
        </td>
        <td id="#R2C2">
            <input class="myCell">
        </td>
        <td id="#R2C3">
            <input class="myCell">
        </td>
        <td id="#R2C4">
            <input class="myCell">
        </td>
    </tr>
    <!-- ...and so on. -->
</table>

Having this table, when some event is triggered,I make this code run:

var rows = 1; // This value is updated when adding/removing a line

//This code runs from any <tr> by event keyup
if (event.altKey) { // I define here all Alt+someKey actions.
    // Getting position values
    var currentId = $(this).attr('id');
    var row = Number(currentId.split('C')[0].substring(1));
    var column = Number(currentId.split('C')[1]);
    var belowVal;

    if (event.which == 66) { //Case Ctrl+B
        // If not the last row, start looping
        if (rows > row) {
            var diff = rows - row;
            // Iteration over rows below
            for (var i = 0; i < diff; i++) {
                // Iteration over each column
                for (var c = 1; c <= 4; c++) {
                    // here I try to get the value from column below
                    belowVal = $('#R'+(row+1+i).toString() +
                              'C'+c.toString()).val();
                    $('#R'+(row+i).toString()+'C' +
                           c.toString()).find('.myCell').val(belowVal);
                }
            }
        }
        $('#myRow'+rows.toString()).empty();
        $('#myRow'+rows.toString()).remove();
        rows--;
    }
}

It works fine for removing the last row, but, when trying to remove an upper row, the values of current row and the ones below become blank instead of moving up. I made this code for each row below to pass it's values to the upper row, but it isn't doing what I wanted.

Why is this happening? I couldn't figure it out.

Maybe you just should not use such an id structure? It seems pretty useless. — Bergi
– Bergi, Commented Sep 10, 2014 at 19:39
Probably. This is a simplified example. The web app has much more functions, this is just one of them. I need the IDs structure to enable functions to move through them by arrow keys, among other stuff. — SebasSBM
– SebasSBM, Commented Sep 10, 2014 at 19:41
I mean that I don't think you need them. There are easier ways to identify table cells by position than ids, ways that do not require to keep track of and update any attributes. — Bergi
– Bergi, Commented Sep 10, 2014 at 19:47
Just in case you are interested: rmariuzzo.github.io/dom-navigator — Garis M Suero
– Garis M Suero, Commented Sep 10, 2014 at 19:57
Thanks, I really appreciate it. But i also need to calculate with row and column positions bidimensionally. The index() function for jQuery is useless for this because sometimes the app requires some hidden inputs in some cells for autocompleting features, among other stuff that is unrelated to this case. In addition, I'd prefer to not use additional libraries for this. — SebasSBM
– SebasSBM, Commented Sep 10, 2014 at 20:03

JHoffmann · Accepted Answer · 2014-09-10 20:23:41Z

2

The problem seem to be, that the ids you are using to access the values are not the ids of the input elements, but rather the ids of the containing table cells.

Here an approach, which doesnt use the ids, but relies on the nodes structure instead, code not tested:

if (event.which == 66) {
    var currentrow = $(this);
    var currentinputs = currentrow.find('input.myCell');
    while(var nextrow = currentrow.next('tr')) {
        var nextinputs = nextrow.find('input.myCell');
        currentinputs.each(function(index,element){
            element.val(nextinputs.get(index).val());
        });
        currentrow = nextrow;
        currentinputs = nextinputs;
    }
    currentrow.remove();
}

edited Sep 10, 2014 at 20:23

answered Sep 10, 2014 at 20:10

JHoffmann

7278 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SebasSBM Over a year ago

Sorry, my bad: the function containing my code is triggered from <tr>, not from <input> ^^'

JHoffmann Over a year ago

@SebasSBM Still the line starting with belowVal = is missing a .find('.myCell') before the .val() call i guess.

SebasSBM Over a year ago

Jeez, I didn't notice! :-$ Thank you

SebasSBM · Accepted Answer · 2015-12-08 15:07:44Z

0

RESOLVED

Thanks to @JHoffmann, I was able to resolve my problem like this:

for (var c = 1; c <= 4; c++) {
    // here I try to get the value from column below
    belowVal = $('#R'+(row+1+i).toString()+'C'+c.toString())
               .find('.myCell').val();
    $('#R'+(row+i).toString()+'C'+c.toString())
               .find('.myCell').val(belowVal);
}

In the line that assigns a value to belowVal, I forgot to call the method .find('.myCell') before calling .val(). That was the mistake that caused my code to fail, as @JHoffmann commented in his answer.

edited Dec 8, 2015 at 15:07

answered Dec 8, 2015 at 15:02

SebasSBM

9283 gold badges9 silver badges35 bronze badges

Collectives™ on Stack Overflow

Strange behaviour with loop in Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related