Jquery ile form satırlarınızı kopyalayın/silin
Aşağıda resimde görüldüğü gibi butona bastıkça satırı kopyalayabilir yada silmek isterseniz yanındaki kutucuğu işaretleyerek silebilirsiniz.Jquery ile html klonlama örneği aşağıda paylaşılmıştır.Jquery ile satır kopyalamak artık çok kolay.
HTML KODU
<form id="forrr" name="frmProduct" method="post" action=""> <div id="demo-outer"> <div id="product-header"> <div class="float-left"> </div> <div class="float-left col-heading">Ürün Adı</div> <div class="float-left col-heading">Ürün Fiyatı</div> </div> <div id="product"> <div class="item-adi float-clear satis" style="clear:both;"> <div class="float-left"><input type="checkbox" name="item_index[]" /></div> <div class="float-left"><input type="text" class="urun" name="item_urun[]" /></div> <div class="float-left"><input type="text" class="fiyat" name="item_fiyat[]" /></div> </div> </div> <div class="btn-action float-clear"> <input type="button" name="add_item" value="Satırı Kopyala" onClick="satirEkle();" /> <input type="button" name="del_item" value="Sil" onClick="silSatir();" /> </div> </div> </form>
JS KODU
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script>
function satirEkle() {
$(".item-adi:last").clone().insertAfter(".item-adi:last");
}
function silSatir() {
$('div.item-adi').each(function(index, item){
jQuery(':checkbox', this).each(function () {
if ($(this).is(':checked') && $("input[name='item_urun[]']").length > 1 ) {
$(item).remove();
}
});
});
}
/*Alt kısım Post etmek isterseniz için yazıldı Ajax yada Post metodu kullanabilirsiniz.*/
function gonderr() {
var arrayDizi =[];
console.log(arrayDizi);
$("#product .satis").each(function () {
var obj=$(this);
var urunadi= obj.find(".urun").val();
var fiyatmiktar= obj.find(".fiyat").val();
if(urunadi) {
arrayDizi.push({AD:urunadi,MIKTAR: fiyatmiktar});
}
});
return arrayDizi;
};
</script>
CSS KODU
<style>
.float-clear{clear:both;}
.float-left{float:left;}
#demo-outer {background-color: #F0F0F0;}
.item-adi input[type="text"] {padding: 5px;border:#ccc 1px solid;margin: 0px 10px;}
.item-adi input[type="checkbox"] {margin: 10px;}
#product-header div{padding: 20px 5px 15px;margin: 0px 10px;}
.col-heading{width:150px;font-size:16px;font-weight:bold;}
.btn-action{padding:10px;}
.btn-action input[type="button"]{padding:5px; border:#CCCCCC 1px solid;}
</style>
Direk Çalıştırmak İçin
aşağıdaki kodları ‘.html’ olarak kaydedip direk çalıştırabilirsiniz
<html>
<head>
<TITLE>Jquery ile html Klonlama</TITLE>
<style>
.float-clear{clear:both;}
.float-left{float:left;}
#demo-outer {background-color: #F0F0F0;}
.item-adi input[type="text"] {padding: 5px;border:#ccc 1px solid;margin: 0px 10px;}
.item-adi input[type="checkbox"] {margin: 10px;}
#product-header div{padding: 20px 5px 15px;margin: 0px 10px;}
.col-heading{width:150px;font-size:16px;font-weight:bold;}
.btn-action{padding:10px;}
.btn-action input[type="button"]{padding:5px; border:#CCCCCC 1px solid;}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script>
function satirEkle() {
$(".item-adi:last").clone().insertAfter(".item-adi:last");
}
function silSatir() {
$('div.item-adi').each(function(index, item){
jQuery(':checkbox', this).each(function () {
if ($(this).is(':checked') && $("input[name='item_urun[]']").length > 1 ) {
$(item).remove();
}
});
});
}
/*Alt kısım Post etmek isterseniz için yazıldı Ajax yada Post metodu kullanabilirsiniz.*/
function gonderr() {
var arrayDizi =[];
console.log(arrayDizi);
$("#product .satis").each(function () {
var obj=$(this);
var urunadi= obj.find(".urun").val();
var fiyatmiktar= obj.find(".fiyat").val();
if(urunadi) {
arrayDizi.push({AD:urunadi,MIKTAR: fiyatmiktar});
}
});
return arrayDizi;
};
</script>
</head>
<body>
<form id="forrr" name="frmProduct" method="post" action="">
<div id="demo-outer">
<div id="product-header">
<div class="float-left"> </div>
<div class="float-left col-heading">Ürün Adı</div>
<div class="float-left col-heading">Ürün Fiyatı</div>
</div>
<div id="product">
<div class="item-adi float-clear satis" style="clear:both;">
<div class="float-left"><input type="checkbox" name="item_index[]" /></div>
<div class="float-left"><input type="text" class="urun" name="item_urun[]" /></div>
<div class="float-left"><input type="text" class="fiyat" name="item_fiyat[]" /></div>
</div>
</div>
<div class="btn-action float-clear">
<input type="button" name="add_item" value="Satırı Kopyala" onClick="satirEkle();" />
<input type="button" name="del_item" value="Sil" onClick="silSatir();" />
</div>
</div>
</form>
<br>
<button type="button" onClick="gonderr();">BAS(Konsalda Diziyi Gör)</button>
<br>
</body>
</html>
