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.

I couldn't figure it out.

Answer 1

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();
}

Answer 2

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.