jquery 等效/浏览器兼容性 e.parentNode.parentNode.childNodes[i].innerText;答案

【问题标题】：Jquery equivalent/ Browser compatibility for e.parentNode.parentNode.childNodes[i].innerText;jquery 等效/浏览器兼容性 e.parentNode.parentNode.childNodes[i].innerText;
【发布时间】：2012-09-20 02:05:38
【问题描述】：

我正在使用以下 sn-p 来更新表格中的某些文本框值。

<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。我可以采用什么替代方法使其在所有浏览器中都能正常工作。

【问题讨论】：

So I can't use jquery?你要不要使用jQuery？
它可以使用 jQuery。不过能不能把html代码也发一下，函数也发一下，或许有更好的办法。
innerText 是 IE-only 代码，在其他浏览器中是 textContent。

标签： javascript jquery internet-explorer cross-browser

【解决方案1】：

你有两个问题：

innerText 未得到普遍支持。
除了 IE childNodes 中包含空白文本节点。 IE 没有，所以如果 <td> 元素之间有空格，tr.childNodes[3] 将引用不同的节点。

我建议的修复：

使用element.textContent || elem.innerText。这是not perfect，但在大多数情况下都可以正常工作。
您似乎正在尝试获取表格单元格的文本内容。如果是这样，您可以使用表的 cells 属性，该属性在 IE 4 中得到普遍支持。

两个修复的示例代码：

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

【讨论】：

【解决方案2】：

试试这个：

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

或

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

【讨论】：

谢谢最后这对我有用 $("#txtCompletion").val($(e).parent().parent().children()[3].innerHTML);

【解决方案3】：

不是所有浏览器都支持innerText，你可以试试jquery 或

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

【讨论】：