previousSibling返回textNode?应返回一个元素
previousSibling returning a textNode? Expected it to return an element
点击此处
fiddle的基本解释:当某人开始在单元格中键入内容,然后制表或取消焦点时,它会在单元格上方创建一个新行,清空最下面的一行,并将焦点移动到该新行中的"下一个"输入元素。它是不完整的,但足够孤立,可以显示问题的行为。
因此,我在理解为什么在通过parentElement调用到达<tr>
元素之后,尝试通过previousSibling.previousSibling
向上两行时遇到了问题。它命中了一个文本节点,因此我无法引用子<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 = '';
};
previousSibling
是前一个同级节点,它很可能不是元素。这就是jQuery存在的原因之一:DOM API是一个真正的痛苦。(如今,在现代浏览器上,我们有previousElementSibling
这样的东西。但我们没有回到jQuery创建的时候。(
添加新行后,您可以使用
$(obj).closest("tr").prev().prev()
以获取新行之前的行。我可能会这样做一次,在循环向下复制单元格值之前,而不是在循环中重复。
在我的案例中,解决方案是删除HTML元素之间的换行符。然后,previousSibling
开始像符咒一样奔跑。
相关文章:
- Jquery在刷新时返回元素的旧值
- 什么'这是返回元素的好方法's路径
- Javascript函数无法返回元素
- getElementById 不返回元素
- JQuery .index() 不返回元素的正确索引
- Lodash Javascript 基于唯一属性值返回元素
- 为什么随机选择算法在 Array[low] 时返回元素(低 === 高)
- scrollTop() 返回元素下方的位置
- Jquery 返回元素的 .width() 取决于元素的找到方式
- D3 按类选择元素并返回元素 ID
- 移除.append()以向其返回元素'的原始状态
- 如何在Selenium Python execute_script中获取返回元素的值
- jQuery find-返回元素的顺序是什么
- 使用jQuery Mobile时未能返回元素的width()
- 数组的递归返回元素
- XML getElementsByTagName在Safari中不返回元素
- JavaScript shift()方法是否返回元素的引用或副本?
- 是否有官方的w3c声明指出用户代理实际上必须以大写形式返回元素的标记名称?
- jQuery在PC上返回元素ID,在Android上返回'undefined'为什么
- 在承诺后从jQuery插件返回元素