將錶行添加到一個重新劃分的分區

只要分區正在重新調整大小，如果分割被擴展，那麼應該添加行，我想要追加和刪除行到表中。如果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>

來源

2016-11-04 alok shreevathsa

試試這個代碼：

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

<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> 
 
\t \t <td>Test</td> 
 
\t \t <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
     <td width=100%>2nd</td> 
 
     <td>Test</td> 
 
\t <td>Test</td> 
 
\t <td>Test</td> 
 
    </tr> 
 
\t <tr> 
 
     <td width=100%>3rd</td> 
 
     <td>Test</td> 
 
\t <td>Test</td> 
 
\t <td>Test</td> 
 
    </tr> 
 
\t <tr> 
 
     <td width=100%>4th</td> 
 
     <td>Test</td> 
 
\t <td>Test</td> 
 
\t <td>Test</td> 
 
    </tr> 
 
\t <tr> 
 
     <td width=100%>5th</td> 
 
     <td>Test</td> 
 
\t <td>Test</td> 
 
\t <td>Test</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
</body> 
 
</html>

來源

2016-11-07 12:26:30 Soliyappan

將錶行添加到一個重新劃分的分區

回答

相關問題