javascript - 检测用户编辑时表格单元格的更改

标签 javascript jquery html django

我正在尝试检测用户输入时的 html 表格单元格更改。当我单击表格单元格时,我可以在其中键入文本,但我的 .change 函数没有被触发。然而,在页面加载时,当从数据库填充数据时,每个表单元格更改都会触发更改函数。我不明白为什么。你能帮我吗。 我的代码如下:

    <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();

});

最佳答案

使用Javascript的input方法。

或者blur方法。

<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 ,但除此之外,它还是有效的!

如果您需要全局支持,请查看 this线程。

所以你的代码看起来像:

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

关于javascript - 检测用户编辑时表格单元格的更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47703952/

相关文章:

jQuery - css() 在 Firefox 中无法正常工作

javascript - 分页替代方案

html - 为什么这些包含图像的无序列表项不在水平行中显示?

无需重新加载的 Jquery 克隆图像

jquery - 使用 JQuery 移动导航栏的垂直选项卡

jquery - 在容器内调整图像大小?

javascript - 将图像从 URL 加载到文件输入字段中

javascript - 从 url 下载 Pdf,将其保存在文件中,zip 然后下载 zip

javascript - 更改选择框的 CSS 样式表 src onChange

javascript - 使用javascript从css检索背景图像而不使用它的ID