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.

Answer 1

try this:

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

or

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