JavascriptPopüler İçerikler

Js ile Html klonlama Satır kopyalama

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.

jquery satir

HTML KODU

<form id="forrr" name="frmProduct" method="post" action="">
<div id="demo-outer">
<div id="product-header">
<div class="float-left">&nbsp;</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">&nbsp;</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>


İlgili Makaleler

4 Yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu