I am using the code below to populate data using data table.

I want to edit data on one of the column and after editing I have to validate the value using onblur event.

I tried calling onblur event on td element but didn't get it .

Any help to achive this is greatly appreciated.

 <table id='abc' border="1">
        <thead>
                <tr>
                    <th>Part Number</th>
                    <th>Quantity</th>
                </tr>
        </thead>

            <tbody>
             <c:forEach items="${uploadData.partsList}" var="part">
                <tr>
                    <td><c:out value="${part.partNumber}" /></td>
                    <td class="editableColumn" style="background-color:white"><c:out      value="${part.quantity}"/>
</td>

                </tr>
            </c:forEach>
        </tbody>
   </table>

I am using the code below to populate data using data table.

I want to edit data on one of the column and after editing I have to validate the value using onblur event.

I tried calling onblur event on td element but didn't get it .

Any help to achive this is greatly appreciated.

 <table id='abc' border="1">
        <thead>
                <tr>
                    <th>Part Number</th>
                    <th>Quantity</th>
                </tr>
        </thead>

            <tbody>
             <c:forEach items="${uploadData.partsList}" var="part">
                <tr>
                    <td><c:out value="${part.partNumber}" /></td>
                    <td class="editableColumn" style="background-color:white"><c:out      value="${part.quantity}"/>
</td>

                </tr>
            </c:forEach>
        </tbody>
   </table>

• javascript
• jquery
• html

• In contrast to MSIE--in which almost all kinds of elements receive the blur event--almost all kinds of elements on Gecko browsers do NOT work with this event. developer.mozilla/en-US/docs/Web/API/… – emerson.marini Commented Jan 8, 2015 at 16:03
• possible duplicate of Detect loss of focus in JavaScript – emerson.marini Commented Jan 8, 2015 at 16:03

3 Answers 3

Onblur will fire if your TD has a tabindex attribute.

I appreciate what you are trying to do here Karibasappa, and, I try not to be one that tells someone they are doing it the 'wrong' way. In this case, however, the TD support for the onblur event is limiting your ability to acplish your need. It may be worth looking into changing the way input data is handled (as Gareth mentioned), maybe by changing the element type to a more traditional input field when the TD, or an embedded container element is clicked. You should find that using traditional models will make your application more patible, and that is something pretty important in the web-application world.

Again, I do appreciate all attempts to get things that don't traditionally work well, working well. It should be our nature :)

I look forward to reading the final solution.

If you are editing data the onblur should go onto the editable fields such as an input, a td won't fire on an onblur event, except in IE.