如何在html中的表格被调整大小时通知？

这就是我想要的。无法通过“调整大小”文本生成警报。调整桌面工作的事件？如果它不怎么能实现它？如何在html中的表格被调整大小时通知？

<!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>

来源

2017-05-22 Agnivesh Reddy

'table'元素不提高resize事件。如果你想要这个行为，你需要在更改表的大小时触发（）一个自定义事件，或者手动调用该函数。 –

使用window.resize事件。您不调整表格的大小：调整窗口大小，这可能恰好调整网页上的流量，包括表格。

如果您打算使用窗口以外的其他方式调整大小，请查看MutationObserverhere。

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>

来源

2017-05-22 13:31:16 FrankerZ

然而OP的问题在于他只是调整了'table'元素，而不是窗口。 –

@RoryMcCrossan是的，我看到他在我回答后修改DOM。我发布了一个后续。 – FrankerZ

如何在html中的表格被调整大小时通知？

回答

相关问题