Jquery equivalent/ Browser compatibility for e.parentNode.parentNode.childNodes[i].innerText;

Question

I am using the following snippet for updating some textbox value from a table.

<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;
}

It works fine for me in IE, but not working in other browsers(Chrome). A notable thing is that the table 'td's and 'tr's don't have Id property to distinguish each other. So I can't use jquery over here. What is the alternative I can follow to make it work in all browsers.

It could use jQuery. But could you post the html code too, and the function too, maybe there is an better way. — xdazz, Sep 28 '12 at 07:50
`innerText` is the IE-only code, in other browsers it is `textContent`. — Teemu, Sep 28 '12 at 07:53

Habibillah · Accepted Answer · 2012-09-28T08:08:10.830

2

try this:

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

or

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

edited Sep 28 '12 at 08:08

answered Sep 28 '12 at 07:56

Habibillah

27,347
5
36
56

Thanks Finally This worked for me $("#txtCompletion").val($(e).parent().parent().children()[3].innerHTML); – amesh Sep 28 '12 at 09:07

score 1 · Answer 2 · edited May 23 '17 at 11:43

Yyou have two problems:

innerText is not universally supported.
All browsers except IE < 9 (and IE 9 in compatibility modes) include whitespace text nodes in childNodes. IE does not, so tr.childNodes[3] is going to refer to different nodes if you have whitespace between your <td> elements.

The fixes I'd recommend:

Use element.textContent || elem.innerText. This is not perfect but will work fine in most cases.
It looks like you're trying to get the text content of a table cell. If so, you can use the cells property of the table, which is universally supported back to IE 4.

Example code with both fixes:

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

score 0 · Answer 3 · answered Sep 28 '12 at 07:54

0

innerText is not supported in all browsers, you might try using jquery or

use .textContent and .innerText based on browser version

answered Sep 28 '12 at 07:54

Chandra Sekhar Walajapet

2,534
17
24

Jquery equivalent/ Browser compatibility for e.parentNode.parentNode.childNodes[i].innerText;

3 Answers3

Linked