Question

我有一个带有文本输入的表格式结构，其中我试图将所有子项删除整行，但首先将单元格的值逐个传递在下面的行中保留ID编号结构。

表结构如下：

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

有了这个表，当某个事件被触发时，我运行这个代码：

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

它可以正常删除最后一行，但是，当尝试删除上一行时，当前行和下面的值变为空白而不是向上移动。我为下面的每一行创建了这段代码，将它的值传递给上一行，但它没有按照我的意愿行事。

为什么会这样？我无法理解。

Answer 1

问题似乎是，您用来访问值的ID不是输入元素的ID，而是包含表格单元格的ID。

这里有一种方法，它不使用id，而是依赖于节点结构，代码未经过测试：

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

<强>分辨

感谢@JHoffmann，我能够像这样解决我的问题：

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

在为belowVal分配值的行中，我忘记在调用.find('.myCell')之前调用方法.val()。这是导致我的代码失败的错误，正如@JHoffmann在他的回答中所评论的那样。

Javascript中循环的奇怪行为

2 个答案: