Contoh di bawah ini cara pembuatannya dengan teknik membuat sebuah fungsi yang menerima argumen berupa jumlah sel dan jumlah kolom (pembentukan sel tabel didasarkan pada nilai jumlah sel dan jumlah kolom yang diberikan).
Cara membuat tabel generate:
Simpan dengan ekstensi .html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Tabel Generate</title>
<style type="text/css">
<!--
#a1 {
width: 180px;
height: 25px;
z-index: 1;
left: 285px;
top: 190px;
}
color: white;
.b1 {
font-weight: bold;
}
-->
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function getmax() {
var R = parseInt(document.getElementById('JumlahRow').value);
var C = parseInt(document.getElementById('JumlahColum').value);
var X = parseInt(document.getElementById('JumlahCell').value);
var cellmax = document.getElementById('maxcells');
var total = 'N/A';
total = R * C;
cellmax.value = new String(total);
if (X > total)
{
alert('Cell Total Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Cells = ' + total);
document.getElementById('CellsTotal').value = new String();
}
}
</script>
<form method="post" action="generate.php">
<h3 class="b1">Generate Sel Tabel Secara Fleksibel</h3>
<div>
<table width="300" border="0" bgcolor="#00ff00">
<tr bgcolor="white">
<td width="120" style="text-align:center">Baris</td>
<td width="189"><strong>= </strong>
<input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"/></td>
</tr>
<tr bgcolor="white">
<td style="text-align:center"><label>Kolom</label></td>
<td><strong>= </strong>
<input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"/></td>
</tr>
<tr bgcolor="white">
<td style="text-align:center">Sel Total </td>
<td><strong>= </strong>
<input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="getmax();" onFocus="this.select();"/></td>
</tr>
<tr bgcolor="white">
<td style="text-align:center">Max Sel </td>
<td><strong>= </strong>
<input name="maxcells" type="text" id="maxcells" readonly="readonly" style="text-align:center"/></td>
</tr>
</table>
</div>
<div id="a1">
<input type="submit" name="Generate" value="Generate"/>
<input type="reset" name="Reset" value="Reset"/>
</div>
</form>
</body>
</html>
Cara membuat hasil generate:
Simpan dengan ekstensi .php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Hasil Generate</title>
</head>
<body>
<div align="center">
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?>
<?php $rows = (int) $_POST["JumlahRow"]; ?>
<?php $columns = (int) $_POST["JumlahColum"]; ?>
<?php $cells = (int) $_POST["JumlahCell"]; ?>
<strong>Kamu Memilih</strong> <?php echo $rows; ?> <em>baris,</em><br />
<strong>Kamu Memilih</strong> <?php echo $columns; ?> <em>kolom,</em><br />
<strong>Dan Anda Membutuhkan</strong> <?php echo $cells; ?> <em>sel,</em><br />
<br />
<br />
<?php
$width = $columns * 75;
echo "<table width=".$width." border=1>";
$rw = 0;
$cel = 1;
while ($rw < $rows && $cel <= $cells)
{
echo "<tr>";
$cl = 0;
while ($cl < $columns)
{
if ($cel <= $cells)
{
echo "<td><div align=center>".$cel."</div></td>";
$cel++;
}
$cl++;
}
echo "</tr>";
$rw++;
}
echo "</table>";
?>
</div>
</body>
</html>
1 komentar:
Keren mbak postingnya..Lanjutkan..:)
Posting Komentar