Detect table cell change on user edit

Question

I'm trying to detect html table cell change on user input. When I click on table cell I can type text in it, but my .change function is not triggered. However on page load when data are populated from database, for every table cell change change function is fired. I can not figure why. Can you help. My code below:

    <div id="table" class="table-editable">
        <table id="myTable" style="width:100%" class="table">
            <tr>
                <th>Id</th>
                <th>Link</th>
                <th>Naslov</th>
                <th>Lokacija</th>
                <th>Cijena</th>
                <th>Telefon</th>
                <th>Posjet</th>
                <th>Opis</th>
                <th>Prednosti</th>
                <th>Nedostaci</th>
                <th>Slike</th>
                <th>Select</th>
            {% for entry in entries %}
            </tr>
            <tr>
                <td>{{ forloop.counter }}</td>
                <td><a id="linkHouse_{{ forloop.counter }}" href="{{ entry.link }}">Link na oglas</a></td>
                <td contenteditable="true">{{ entry.header }}</td>
                <td contenteditable="true">{{ entry.location  }}</td>
                <td id="priceHouse_{{ forloop.counter }}" contenteditable="true">{{ entry.price  }}</td>
                <td id="contactHouse_{{ forloop.counter }}" contenteditable="true">{{ entry.contacts }}</td>
                <td id="visitedHouse_{{ forloop.counter }}" contenteditable="true">{{ entry.visited  }}</td>
                <td id="descriptionHouse_{{ forloop.counter }}" contenteditable="true">{% for line in entry.description.splitlines %} {{line}}<br> {% endfor %}</td>
                <td id="prosHouse_{{ forloop.counter }}" contenteditable="true" >{% for line in entry.pros.splitlines %} {{line}}<br> {% endfor %}</td>
                <td id="consHouse_{{ forloop.counter }}"contenteditable="true">{% for line in entry.cons.splitlines %} {{line}}<br> {% endfor %}</td>
                <td >
                    <a class="fancybox" target="_blank" data-fancybox="images" href="{% static "Pic/img_fjords_wide.jpg" %}"><img src="{% static "Pic/img_fjords_wide.jpg" %}" alt="" style="width:150px"></a>
                    <a class="hide fancybox" target="_blank" data-fancybox="images" href="{% static "Pic/img_lights_wide.jpg" %}"><img src="{% static "Pic/img_lights_wide.jpg" %}" alt=""></a>
                    <a class="hide fancybox" target="_blank" data-fancybox="images" href="{% static "Pic/img_mountains_wide.jpg" %}"><img src="{% static "Pic/img_mountains_wide.jpg" %}" alt=""></a>
                </td>
                <td style="text-align: center; vertical-align: middle;">
                    <button id="delHouse_{{ forloop.counter }}" onclick="delHouse(this.id)">Delete</button>

                    <!--<input type="checkbox" name="delete{{ forloop.counter }}">-->
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>




$(document).ready(function(){
$( "#myTable td" )
  .change(function () {
        console.log("petar");
        var data = this.innerHTML;
        console.log("value="+data);
  })
  .change();

});

Chris Happy · Accepted Answer · 2017-12-07T22:24:33.740

2

Use Javascript's input method.

Or the blur method.

<div contenteditable oninput="console.log(this.innerHTML)">Change me (input)!</div>

<div contenteditable onblur="console.log(this.innerHTML)">Change me (blur)!</div>

IE 6 & 8 and Opera Mini are not supported & IE 9 partial support, but either than that, it works!

If you want global support, check out this thread.

So your code would look like:

$(document).ready(function(){
  $( "#myTable td" )
    .input(function () {
          console.log("petar");
          var data = this.innerHTML;
          console.log("value="+data);
    })
  .input();
});

edited Dec 07 '17 at 22:24

answered Dec 07 '17 at 21:24

Chris Happy

7,088
2
22
49

This way function is triggered on every character/keypad pressed. What I would like to achieve is type some text and then after all the text has been entered to trigger function, e.g on mouse move off cell (cell out of focus or something) – jack_oneal Dec 07 '17 at 22:13
Did you check out [`blur`](https://developer.mozilla.org/en-US/docs/Web/Events/blur)? – Chris Happy Dec 07 '17 at 22:23
That's the thing I was looking for. Rally appreciate help. – jack_oneal Dec 08 '17 at 00:51

Detect table cell change on user edit

1 Answers1