<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style type="text/css">
table {
width: 100%;
margin: 20px 0;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #cdcdcd;
}
table th, table td {
padding: 5px;
text-align: left;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".add-row").click(function () {
var id = $("#id").val();
var name = $("#name").val();
var lastname = $("#lastname").val();
var tel = $("#tel").val();
var adres = $("#adres").val();
var markup = "<tr> <td>" + id + "</td> <td>" + name + " " +lastname + "</td> <td>" + tel + "</td> <td>" + adres + "</td></tr>";
$("table tbody").append(markup);
});
});
</script>
</head>
<body>
<form style="float: left; margin-bottom: 20px;">
<div style="float: left;width: 190px;">
AD:<input type="text" id="name"> <br />
SOYAD:<input type="text" id="lastname" placeholder="Soyad"> <br />
ID:<input type="number" id="id" placeholder="ID">
</div>
<div style="float: left;width: 230px;">
TELEFON:<input type="text" id="tel" placeholder="Telefon"><br />
ADRES: <textarea id="adres" rows="5" cols="21" placeholder="adres"></textarea>
<input type="button" class="add-row" value="EKLE">
</div>
</form>
<table>
<thead>
<tr>
<th>ID</th>
<th>Ad-Soyad</th>
<th>Telefon</th>
<th>Adres</th>
</tr>
</thead>
<tbody>
<tr>
<td>55</td>
<td>Seyma nur</td>
<td>+90 5378787874</td>
<td>Adresss lkjsfklsj</td>
</tr>
</tbody>
</table>
</body>
</html>
0 yorum:
Yorum Gönder