Ajout de lignes de table à une division redimensionnable

Je souhaite ajouter et supprimer des lignes à une table tant que la division est redimensionnée, si la division est développée, des lignes doivent être ajoutées. si le div est compressé, alors les lignes devraient être supprimées, comment y parvenir? s'il vous plaît aider ..Ajout de lignes de table à une division redimensionnable

ici est mon code,

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

et mon script est,

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

Source

2016-11-04 alok shreevathsa

Essayez ce code:

$(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>

Source

2016-11-07 12:26:30 Soliyappan

Ajout de lignes de table à une division redimensionnable

Répondre

Questions connexes