javascript - html 中的表格大小调整时如何通知?

标签 javascript jquery html html-table

这就是我正在尝试的。无法生成带有“调整大小”文本的警报。调整表上事件的大小是否有效?如果没有,我怎样才能实现它?

<!DOCTYPE html>
<html lang="en">
<head> 
<script  src="js/jquery.js"></script>
<script type="text/javascript">
  $(function(){ 
  $("#btn").click(function(e){
            $("#normal").css("width", "1200px");
        });
   });
   </script>
   <script type="text/javascript">
    function myFunction(){
        alert("resized");}
</script>
</head>
<body>
    <div class="center" >
    <div style="float:left;">
        <div style="height:100px; width: 50px; float:'left'">
            <button style="height:30px; width: 150px; float:'left'" id="btn">Click</button>
        </div>
         <table id="normal" width="75%" border="0" cellpadding="0" cellspacing="0" style="float:left;" onresize="myFunction()">
            <tr><th>header</th><th>header</th><th>header</th></tr>
            <tr><td class="left">cell</td><td>cell</td><td class="right">cell</td></tr>
            <tr><td class="left">cell</td><td>cell</td><td class="right">cell</td></tr>
            <tr><td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td></tr>                                                                    
        </table>
    </div></div>    
</body>
</html>

最佳答案

使用window.resize事件。您不调整表格的大小:您调整窗口的大小,这可能只是调整网页(包括您的表格)上的流程。

如果您要使用窗口以外的其他方式调整其大小,请查看 MutationObserver here .

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
        //Check if resized here
    });    
});

var target = document.getElementById('normal');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

console.log('After 2 seconds, the style will change');
setTimeout(function() {
    $("#normal").css("width", "1200px");
}, 2000);
#normal
{
  width: 200px;
}

.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="normal"></div>

关于javascript - html 中的表格大小调整时如何通知?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44114210/

相关文章:

javascript - 使用JS将输入设置为只读

javascript - 如何避免匿名/内联函数

javascript - jquery ajax-如何检查重复名称

html - "Float:right"未应用于提交按钮

html - CSS。如何使用 flex 居中显示宽度而不是可用空间的元素

javascript - 覆盖 JavaScript 函数

javascript - BabylonJS 矩阵

javascript - 如何在 ReactJs 中渲染 onclick 提交按钮的函数?

javascript - 识别手动选择元素的最佳方法

jquery - 使用 jquery 更改具有嵌套内容的 div 的可见性,onclick