如何在jquery中重新调整大小时将行追加到表中答案

【问题标题】：How to append rows to a table while re-sizing in jquery如何在jquery中重新调整大小时将行追加到表中
【发布时间】：2016-11-04 10:37:09
【问题描述】：

我想在表中追加和删除行，只要该分区正在重新调整大小，如果扩展分区，则应该添加行。如果 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>

【问题讨论】：

标签： jquery html resizable

【解决方案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>

【讨论】：