javascript - previousSibling 返回一个 textNode？期望它返回一个元素

Question

Fiddle here

fiddle 的基本解释:当有人开始在单元格中输入内容，然后按 Tab 键移开或取消焦点时，它会在其上方创建一个新行，清空底行，并将焦点移至该新行中的“下一个”输入元素排。它不完整，但足够隔离以显示问题行为。

所以我在理解为什么当我尝试通过 previousSibling.previousSibling 向上移动两行时遇到问题转到<tr>后通过parentElement调用的元素。它命中了一个文本节点，因此我无法引用子节点 <td>元素。我错过了什么？

previousElementSibling由于必须支持IE8，无法使用。

代码:

<table border="1" cellspacing="1" id="lab-request-data_entry-table">
    <thead class="ui-widget-report-header">
        <tr>
            <th>#</th>
            <th>
                <button class="ui-widget ui-widget-header">Delete</button>
            </th>
            <th>Location</th>
            <th>Barcode</th>
            <th>SumNukm</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>
                <button class="ui-widget ui-widget-header" onclick="delete_record(this);">Delete</button>
            </td>
            <td>
                <input type="hidden" value="v" />
                <input type="text" value="v" />
            </td>
            <td>
                <input type="hidden" value="222" />
                <input type="text" value="222" />
            </td>
            <td>
                <input type="hidden" value="22" />
                <input type="text" value="22" />
            </td>
            <td>VALID</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>
                <input type="text" onBlur="add_new_rec(this);" />
            </td>
            <td>
                <input type="text" onBlur="add_new_rec(this);" />
            </td>
            <td>
                <input type="text" onBlur="add_new_rec(this);" />
            </td>
            <td>New Record</td>
        </tr>
    </tbody>
</table>

JS:

add_new_rec = function (obj) {
    var trait_arr = [1, 2, 3];
    var $tbody = $("#lab-request-data_entry-table tbody");
    var $erow = $(obj).parent().parent(); //Entry row.
    var indexCol = $erow.find('td').index($(obj).parent()); //It's index.
    var colCount = $(obj).parent().parent().find('td').length - 3; //Data entry columns to be inserted. Subtract 3 for the number, delete, and status
    var rowLen = $tbody.find("tr").length;
    var row_above = rowLen > 1 ? true : false;
    if ($.trim(obj.value) == '') {
        return;
    }
    var rowInfo = '';
    rowInfo = '<button type="button" class="ui-widget ui-widget-header" onclick="delete_record(this); return false;" >Delete</button>';
    $erow.before('<tr></tr>');
    $erow.prev().append('<td><label>' + (rowLen) + '</label></td><td>' + rowInfo + '</td>');
    //Now iterate through the columns, adding in a previous value if it's not the obj's location
    for (var i = 0; i < colCount; i++) {
        if (i == indexCol - 2) { //Case of it being the row we entered.
            rowInfo = '<td><input type="hidden" value="' + obj.value + '"/><input type="text" value="' + obj.value + '"/></td>';
        } else if (row_above == true) { //If so, pull down the answer into rowinfo
            var numb = i + 2;
            var prevCell = obj.parentElement.parentElement.previousSibling.previousSibling.children[numb].children[0].value; //Due to row added due to row number added already, we have to go another row up.
            rowInfo = '<td><input type="hidden" value="' + prevCell + '"/><input type="text" value="' + prevCell + '"/></td>';
        } else { //Create a blank row element.
            rowInfo = '<td><input type="hidden" value=""/><input type="text" value=""/></td>';
        }
        $erow.prev().append(rowInfo);
    }
    //After done, add a status column with "New Record

    //Call an update function and focus on the "next" row in the new row
    obj.value = '';
};

Answer 1

previousSibling 是前一个同级节点，它很可能不是一个元素。这是 jQuery 存在的原因之一:DOM API 真的很痛苦。 (现在情况不太一样了，在现代浏览器上我们有像 previousElementSibling 这样的东西。但是当 jQuery 创建时我们并没有回来。)

添加新行后，可以使用

$(obj).closest("tr").prev().prev()

...获取新行之前的行。我可能会在循环向下复制单元格值之前执行一次，而不是在循环中重复执行。