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>');
});

用tr动态填充表

1 个答案: