動態填充表tr

Question

我有兩個輸入值。 enc_rows和enc_slots

<input type=text size=2 name=enc_rows id=enc_rows value='".$enc_data["enc_rows"]."'> 
<input type=text size=2 name=enc_slots id=enc_slots value='".$enc_data["enc_slots"]."'> 

我需要「畫」動態地取決於在兩個字段規定的數的時隙的行數和數量。

echo " 
<table id='enc_square'> 
<tbody id='tbody_data'> 
"; 
for ($y=0; $y < $t_row["enc_rows"]; $y++) 
{ 
    echo "<tr class='enc_tr' id='".$y."'>"; 
for ($x=0; $x < $t_row["enc_slots"]; $x++) 
    echo "<td class='enc_td' id='".$x."'></td>"; 
echo "</tr>"; 
} 
echo " 
</tbody> 
</table> 
"; 

試圖用一些簡單的CSS和jQuery：

<style> 
.enc_tr{ 
height:100px; 
width: 100px; 
} 
.enc_td{ 
height:100px; 
width: 100px; 
color:#000; 
border:1px #000 solid !important; 
} 
#enc_square{ 
position:static; 
background-color:#aaa; 
color:#000; 
border:1px #000 !important;' 
} 
</style> 

<script type=text/javascript language='javascript'> 
$(document).ready(function() { 
$('#enc_rows').bind('change', function() { 
    $('#tbody_data').empty(); 
    var height = $(this).val(); 
    $('#enc_square').css('height', 100 * height); 
    for(x=0;x < height;x++) 
     $('#tbody_data').last().after('<tr class=\'enc_tr\' id=' + x +'></tr>'); 
}); 
$('#enc_slots').bind('change', function() { 
    var width = $(this).val(); 
    var slotCount = $('#enc_square td').length/$('#enc_rows').val(); 
    $('#enc_square').css('width', 100 * width); 
    $('#enc_square > td:last').appendTo('<td class=\'enc_td\' id=' + (slotCount+1) +'></td>'); 
}); 
}); 
</script> 

當我設置enc_rows 1 - 或3 - 它完全消除TBODY。 （以及去除所述正方形）

Answer 1

工作了：

$('#enc_rows').bind('change', function() { 
    var slotCount = $('#enc_slots').val(); 
    var height = $(this).val(); 
    $('#enc_square tbody').empty(); 
    $('#enc_square').css('height', 100 * height); 
    for(var y=1; y <= height; y++) 
     $('#enc_square tbody').append('<tr class=\'enc_tr\' id=' + y +'></tr>'); 
    for (var x=1; x <= slotCount; x++) 
     $('#enc_square tbody tr').append('<td class=\'enc_td\' id=' + x +'></td>'); 
});