0

入力に ​​2 つの値があります。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"]."'>

2 つのフィールドに指定された数に応じて、行数とスロット数を動的に「描画」する必要があります。

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 が完全に削除されます。（そして正方形を削除します）

4

1 に答える 1

0

それを解決しました：

$('#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>');
});
于 2013-10-28T19:50:14.277 に答える