previousSibling возвращает textNode? Ожидалось, что она возвращает элемент

Question

Fiddle here

Основные объяснения скрипкой: Когда кто-то начинает вводить в клетку, а затем вкладки прочь или unfocuses, он создает новую строку над ней, гасит нижний ряд, и перемещает фокус к «следующему» элементу ввода в этой новой строке. Это неполное, но достаточно изолированное, чтобы показать поведение проблемы.

Так что у меня возникла проблема с пониманием того, почему, когда я пытаюсь пройти две строки вверх по 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 - настоящая боль. (Less так в эти дни, на современных браузерах есть такие вещи, как previousElementSibling. Но мы не назад, когда JQuery был создан.)

После добавления новой строки, вы можете использовать

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

... чтобы получить строку перед новой строкой. Я бы, наверное, сделал это один раз, прежде чем цикл скопировал значения ячейки вниз, а не повторялся в цикле.