e.parentNode.parentNode.childNodes[i].innerText.Jquery等同于浏览器的兼容性。

Question

我正在使用下面的代码段来更新一个表格中的一些文本框值。

<table>
  <tr>
    <td>ProjectName</td>
    <td>Block</td>
    <td>.WorkProgressMilestone</td>
    <td>Completion</td>
    <td>
       <span class="sep">
       <img height="15px" width="20px" src="@Url.Content("~/Content/themes/base/images/Edit.png")" />
       </span>
       <a href="#" onclick="EditWorkDetails(this);" style="text-decoration: none">Edit</a>
       <input id="WorkProgressEditID" name="WorkProgressEditID" type="hidden" value="@v.WorkProgressID" />
     </td>
   </tr>
   <tr>..</tr>
 </table>


function EditWorkDetails(e) {
document.getElementById("txtCompletion").value = e.parentNode.parentNode.childNodes[3].innerText;
}

它在IE中工作得很好，但在其他浏览器(Chrome)中却不能工作。值得注意的是，表格'td'和'tr'没有Id属性来区分彼此。所以我不能在这里使用jquery。我有什么办法可以让它在所有的浏览器中工作。

Answer 1

试试这个。

document.getElementById("txtCompletion").value = $(this).parent().parent().children()[3].html();

或者

$("txtCompletion").val($(this).parent().parent().children()[3].html());

Answer 2

你有两个问题。

1. innerText 不是普遍支持。
2. 除了IE <9（以及兼容模式下的IE 9）之外，所有的浏览器都包含了空白文本节点，在。childNodes. IE没有，所以 tr.childNodes[3] 如果在你的 <td> 元素。

我推荐的修复方法。

1. 使用 element.textContent || elem.innerText. 这就是 不完善 但在大多数情况下都能正常工作。
2. 看起来你是想获取一个表格单元格的文本内容。如果是这样，你可以使用 cells 属性，这一点在IE 4中得到了普遍支持。

两种修复方法的示例代码。

var td = e.parentNode.parentNode.cells[3];
var tdText = td.textContent || td.innerText;

Answer 3

并非所有浏览器都支持innerText，你可以尝试使用jquery或

根据浏览器版本使用.textContent和.innerText。