如何在 jquery 中调整大小时将行附加到 table

Question

我想在 table 中添加和删除行，只要 division 正在调整大小，如果 division 已扩展，则应添加行。如果 div 被压缩，那么这些行应该被删除，如何实现呢？请帮助..

这是我的代码，

<html>
<body>
 <div id="resizable" style="width:100px;height:100px;background-color:blue">
   <table border=1>
      <tr>
        <td width=100%>1st</td>
        <td>2nd</td>
     </tr>
     <tr>
       <td>3rd</td>
       <td>4th</td>
     </tr>
   </table>
 </div>
</body> 
</html>

我的脚本是，

<script>
  $( function() {
    $( "#resizable" ).resizable({
      handles: "se"
    });
  } );
  </script>

Answer 1

试试这个代码：

   $(function() {
   $("#resizable").resizable({
  minHeight: 20,
}); 
var table_height = $('#data-table').height();
var table_rowheight = $('#data-table tr').height(); 
var rows_count = $('#data-table tr').length; 
$("#resizable").on('resize', function(e) {
 var div_height = $(this).height(); 
 for (var i = 1 ; i <= rows_count; i++) { 
  var find_height = findheight(table_height, table_rowheight, i);
  if( (div_height > (find_height - 5)) && (div_height < (find_height + 5)) ){     
   $('#data-table tr').eq(rows_count - i).hide();
  }else if(div_height > (findheight(table_height, table_rowheight, i))){
   $('#data-table tr').eq(rows_count - i).show(); 
  }    
 }  
}); 
function findheight(table_height, table_rowheight, row_no){
 var height = table_height - (row_no * table_rowheight)
 return height;
} 
  });

<html>
<head>  
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="resizable" style="width:110px;height:110px;background-color:yellow" class="resize">
   <table border=1 id="data-table" cellspacing="0" cellpadding="0">
      <tr>
        <td width=100%>1st</td>
        <td>Test</td>
  <td>Test</td>
  <td>Test</td>
     </tr>
     <tr>
       <td width=100%>2nd</td>
       <td>Test</td>
    <td>Test</td>
    <td>Test</td>
     </tr>
   <tr>
       <td width=100%>3rd</td>
       <td>Test</td>
    <td>Test</td>
    <td>Test</td>
     </tr>
  <tr>
       <td width=100%>4th</td>
       <td>Test</td>
    <td>Test</td>
    <td>Test</td>
     </tr>
  <tr>
       <td width=100%>5th</td>
       <td>Test</td>
    <td>Test</td>
    <td>Test</td>
     </tr>
   </table>
 </div>
</body>
</html>

如何在 jquery 中调整大小时将行附加到 table

How to append rows to a table while re-sizing in jquery

jquery

html

resizable