表格更改内容时调用 Javascript 函数答案

【问题标题】：Call a Javascript function when a table change content表格更改内容时调用 Javascript 函数
【发布时间】：2015-03-18 15:28:51
【问题描述】：

我有一个将数字格式化为货币的 Javascript 代码。所有的内容都在一张桌子上。目前，我在每个<tr> 中都有一个类money，并且在单元格更改时调用该函数。仅供参考，表格中的所有单元格同时更改。

var spans = document.getElementsByClassName("money");
for (var i = 0; i < spans.length; i++) {
    var newText = spans[i].innerHTML.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    spans[i].innerHTML = newText;
}

有什么方法可以代替在每个单元格上使用相同的类并在所有单元格上捕获一个事件，在桌子上进行并获得相同的结果？例如，

$("#mytable").on('change', function() {
  // put my function here and apply to every cell
});

更新：我添加了DOMSubtreeModified 并尝试遍历表中的每个单元格。但是，即使我在控制台上没有任何错误，它似乎也不起作用。

<script type="text/javascript">
    $("#resultstable").bind("DOMSubtreeModified", function() {

      $('#resultstable tr').each(function() {
        $('td').each(function (i, cell) {
          cell.innerHTML.replace(/\B(?=(\d{3})+(?!\d))/g, ",");    
      });
    });
    });  

</script>

【问题讨论】：

一个表没有更改事件，一个普通的 html 表不可能交互/更改内容，所以我猜你在表中使用输入元素？
class=money 在表的<tr> 上。并更改<td> 的内容。我知道表格没有“更改”事件。这就是为什么我问是否有办法做这样的事情
但是如何更改内容？

标签： javascript jquery

【解决方案1】：

尽量用DOMSubtreeModified点赞，

$("#mytable").bind("DOMSubtreeModified", function() {
    alert("Hurrey table changed");
});

阅读Dom-event-javascript article

$(function(){
    $('button').on('click',function(){
        $('#mytable').append('<tr><td>Next '+($('#mytable tr').length+1)+'</td></tr>');
    });
    $("#mytable").bind("DOMSubtreeModified", function() {
        alert("Hurrey table changed");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
    <tr>
        <td>Next 1</td>
    </tr>
</table>
<br/>
<button>Test</button>

【讨论】：

你能为你的代码做一个在线演示吗？此外，您的两个表 ID 都存在冲突。

【解决方案2】：

您可以使用 setInterval() 来监控表格。

setInterval(function() { check(); }, 1000); //Call check() function every 1s.

在 check() 中，您需要比较一些逻辑。

【讨论】：

【解决方案3】：

$(function() {
    $(".money").each(function(indexOfElement, elementValue) {
        for (var i = 0; i < elementValue.length; i++) {
            var newText = elementValue[i].innerHTML.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            $(elementValue).html(newText);
        }
    })

});

上面的代码迭代每个具有“money”类的元素，并用货币文本替换文本。该脚本将在页面准备就绪时运行

【讨论】：