table可编辑属性标签编辑

前端成长营

已于 2024-02-27 16:13:33 修改

阅读量482

点赞数 7

文章标签： table编辑标签可编辑 table修改 js

于 2024-02-27 16:01:06 首次发布

本文链接：https://blog.csdn.net/weixin_43617604/article/details/136324858

版权

本文介绍如何在HTML中使用`contentEditable`属性使div内容可编辑，并通过JavaScript的MutationObserver实现对内容修改的实时监听。代码示例展示了如何配置和使用MutationObserver来检测div内容的变化。

摘要由CSDN通过智能技术生成

文章目录

table中可编辑属性

div 等标签直接修改内容添加 `contentEditable="true"` 鼠标点击时可直接修改

在这里插入图片描述

实时监听div的内容修改 `demo—code`

在这里插入图片描述

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>监听 div 内容变化</title>  
    <script src="./js/jquery-1.11.0.min.js"></script>  
    <script>  
        $(document).ready(function() {  
            // 选择类名为 'dev' 的 div  
            var targetNode = document.querySelector('.dev');  
  
            // 观察器的配置（需要观察什么变动）  
            var config = { attributes: true, childList: true, subtree: true, characterData: true };  
  
            // 当观察到变动时执行的回调函数  
            var callback = function(mutationsList, observer) {  
                // 遍历所有变动  
                for(var mutation of mutationsList) {  
                    if (mutation.type === 'characterData') {  
                        // 如果变动类型是字符数据变动，则可能是内容变化  
                        console.log('div 内容变化了:', mutation.target.data);  
                        // 在这里执行你想要的操作  
                    }  
                }  
            };  
  
            // 创建一个观察器实例并传入回调函数  
            var observer = new MutationObserver(callback);  
  
            // 以上述配置开始观察目标节点  
            observer.observe(targetNode, config);  
  
            // 之后，可停止观察  
            // observer.disconnect();  
        });  
    </script>  
</head>  
<body>  
  
<div class="dev" contentEditable="true" style="width: 200px; height: 100px; border: 1px solid black;">  
    编辑此div的内容来触发事件  
</div>  
  
</body>  
</html>