onblur event on table td

Question

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>

_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._ https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onblur — emerson.marini, Jan 08 '15 at 16:03
possible duplicate of [Detect loss of focus in JavaScript](http://stackoverflow.com/questions/12486399/detect-loss-of-focus-in-javascript) — emerson.marini, Jan 08 '15 at 16:03

score 5 · Answer 1 · answered Jan 08 '15 at 17:30

5

Onblur will fire if your TD has a tabindex attribute.

answered Jan 08 '15 at 17:30

wwwmarty

858
4
10

score 3 · Answer 2 · answered Jan 08 '15 at 19:29

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 accomplish 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 compatible, 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.

score 2 · Answer 3 · answered Jan 08 '15 at 16:28

2

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.

answered Jan 08 '15 at 16:28

Gareth

21
3

but in my case, i am editing table data td, so i need onblur for this..how can i achieve this ? – Karibasappa G C Jan 08 '15 at 17:45
How are you editing the data, what I see in your example will build a static table that only displays data? – Gareth Jan 08 '15 at 19:27
No @Gareth,when i click on column it becomes editable and onblur it should validate – Karibasappa G C Jan 09 '15 at 06:05
The best I can think of is to make an input field inside of your and have the onblur validate on that field instead of the td. – Gareth Jan 09 '15 at 19:46

onblur event on table td

3 Answers3