Javascript ile html nesnelerinin yerini değiştirme

Javascript ile html nesnelerinin yerini değiştirme, yukarı aşağı kaydırma ve nesne silme işlemlerini basitçe nasıl yapabiliriz, işte size ufak bir örnek.

'.wch_stripslashes('
Başlık

Değer







function AddItem() { var baslik = $("#baslik").val(); var deger = $("#deger").val(); var dataListCount = GetCount(); var dataListObj = $("#data-list").find("ul"); var removeBtnText = "Çıkar "; var upBtnText = "Yukarı "; var downBtnText = "Aşağı "; var itemText = "
  • "+dataListCount+" - " + removeBtnText + downBtnText + upBtnText + "" + deger + "" + baslik + "
  • "; dataListObj.append(itemText); UpdateCount(); } function RemoveItem(e) { var evt = e || window.event; // this assign evt with the event object var current = evt.target || evt.srcElement; // this assign curr if($(current).parent().is("li")) { $(current).parent().remove(); } UpdateCount(); } function UpItem(e) { var evt = e || window.event; // this assign evt with the event object var current = evt.target || evt.srcElement; // this assign curr var upItem = $(current).parent().prev(); if (upItem !== null && upItem.is("li")) { $(current).parent().swapWith(upItem); } UpdateCount(); } function DownItem(e) { var evt = e || window.event; // this assign evt with the event object var current = evt.target || evt.srcElement; // this assign curr var downItem = $(current).parent().next(); if (downItem !== null && downItem.is("li")) { $(current).parent().swapWith(downItem); } UpdateCount(); } function Clear() { var baslik = $("#baslik").val(); var deger = $("#deger").val(); var dataListObj = $("#data-list").find("ul"); dataListObj.empty(); UpdateCount(); } $.fn.swapWith = function(swap_with_selector) { var el1 = this; var el2 = $(swap_with_selector); if ( el1.length === 0 || el2.length === 0 ) return; var el2_content = el2.html(); el2.html(el1.html()); el1.html(el2_content); }; function GetCount() { return $("#data-list").find("ul").find("li").length; } function UpdateCount() { $("#data-list-count").text("Toplam " + GetCount() + " seçenek"); } ').'

    Bir Cevap Yazın

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