Tentunya setiap bahasa pemrograman memiliki dasar sendiri sendiri , bahasa pemroraman GUI dan TEXT sudah jelas mereka memiliki dasar yang berbeda , disni sebenernya saya tidak membahasa tentang dasar bahasa bahasa dasar pemrograman namun saya akan membuat topik mengenai insert data pada bahasa pemrograman web yaitu HTML dan javascipt ..
simpan dengan nama.index
<!DOCTYPE html>
<html>
<head>
<title>htmml</title>
<script type="text/javascript" src="fungsi.js"></script>
</head>
<body >
<div id="myform" align="center">
<b>input</b>
<table>
<tr>
<td>kode barang :</td>
<td><input type="text" id="kode_barang" required></td>
<td> <input type="button" value="Ref" id="Ref" onclick="numb()" /></td>
</tr>
<tr>
<td>Nama:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Harga:</td>
<td><input type="text" id="harga" onkeyup="angka(this);">
</tr>
<tr><td></td><td><input type="button" id="add" value="Simpan" onclick="Javascript:addRow()"></td></td></tr>
</table>
</div>
<div id="mydata" align="center">
<b>output</b>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td> <b> kode barang</b></td>
<td><b>Nama</b></td>
<td><b>harga</b></td>
</tr>
</table>
</div>
</body>
</html>
untuk javascipt nya simpan dengan nama fungsi.js
function addRow() {
var number = document.getElementById("kode_barang");
var Name = document.getElementById("name");
var harga = document.getElementById("harga");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= number.value;
row.insertCell(1).innerHTML= Name.value;
row.insertCell(2).innerHTML= harga.value;
}
function numb(){
var x = document.getElementById("myTableData").rows.length ;
document.getElementById("kode_barang").value = 'B'+00000+x;
}
function angka(a) {
if (!/^[0-9]+$/.test(a.value)) {
a.value = a.value.substring(0,a.value.length-1);
}
}
satukan dalam satu folder setalah selesai coba jalan melalui browser .
silahkan tinggalkan komentar jika ada yang di tanyakan .
Input data disini tanpa database atau dynamic insert , untuk pembuatan scipt nya silahkan di copas masing - masing .
simpan dengan nama.index
<!DOCTYPE html>
<html>
<head>
<title>htmml</title>
<script type="text/javascript" src="fungsi.js"></script>
</head>
<body >
<div id="myform" align="center">
<b>input</b>
<table>
<tr>
<td>kode barang :</td>
<td><input type="text" id="kode_barang" required></td>
<td> <input type="button" value="Ref" id="Ref" onclick="numb()" /></td>
</tr>
<tr>
<td>Nama:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Harga:</td>
<td><input type="text" id="harga" onkeyup="angka(this);">
</tr>
<tr><td></td><td><input type="button" id="add" value="Simpan" onclick="Javascript:addRow()"></td></td></tr>
</table>
</div>
<div id="mydata" align="center">
<b>output</b>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td> <b> kode barang</b></td>
<td><b>Nama</b></td>
<td><b>harga</b></td>
</tr>
</table>
</div>
</body>
</html>
untuk javascipt nya simpan dengan nama fungsi.js
function addRow() {
var number = document.getElementById("kode_barang");
var Name = document.getElementById("name");
var harga = document.getElementById("harga");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= number.value;
row.insertCell(1).innerHTML= Name.value;
row.insertCell(2).innerHTML= harga.value;
}
function numb(){
var x = document.getElementById("myTableData").rows.length ;
document.getElementById("kode_barang").value = 'B'+00000+x;
}
function angka(a) {
if (!/^[0-9]+$/.test(a.value)) {
a.value = a.value.substring(0,a.value.length-1);
}
}
satukan dalam satu folder setalah selesai coba jalan melalui browser .
silahkan tinggalkan komentar jika ada yang di tanyakan .
0 Response to "cara input data ke table menggunakan HTML dan Javascipt"
Post a Comment