v2.5.2
Giriş yap

Form elamanlarını taşıma ve silme

medesan
951 defa görüntülendi
1

merhaba arkadaşlar, aşağıdaki gibi bir yapım var.
form elamanlarını yukar- aşağ taşımma ve silme işlemlerini bir türlü yapamadım.
yardımcı olabilirseniz çok sevinirim.

Görünüm için tıkla

HTML Bölüm

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form method="post" id="addForm" action="" enctype="multipart/form-data" class="form-horizontal" role="form" data-parsley-validate="" novalidate="">
  <div style="padding: 12px 20px 15px 20px; background-color: #fff;">
    <div class="form-body">
      <div class="form-group">
        <div class="col-md-9">
          <ol id="optionHolder" style="padding-left: 10px;"></ol>
          <span class="btn btn-sm btn-info" onclick="SecenekEkle();"><i class="fa fa-plus"></i> Add Option</span>
        </div>
      </div>
    </div>
  </div>
</form>

Seçenek ekleme fonksiyonu

function SecenekEkle() {
    var idx = $('#optionHolder li').last().data('id') + 1;
    var T = '';
    T += '<li id="option_' + idx + '" data-id="' + idx + '">';
    T += '<span style="display: block; margin-top: 5px; margin-bottom: 10px; color: #737373;">';
    T += '<input type="text" name="option[' + idx + ']" maxlength="255" value="" style="display: inline-block; vertical-align: middle; width: 240px !important;" class="form-control"> - ';
    T += '<input type="text" name="hit[' + idx + ']" maxlength="8" value="0" style="display: inline-block; vertical-align: middle; width: 80px !important;" class="form-control"> ';
    T += '<span class="btn btn-sm btn-success" onclick="moveOption(' + idx + ', -1);"><i class="fa fa-arrow-up"></i></span> ';
    T += '<span class="btn btn-sm btn-warning" onclick="moveOption(' + idx + ', +1);"><i class="fa fa-arrow-down"></i></span> ';
    T += '<span class="btn btn-sm btn-danger" onclick="delOption(' + idx + ');"><i class="fa fa-close"></i></span>';
    T += '</span>';
    T += '</li>';
    
    $('#optionHolder').append(T);
}
javascript jquery
Cevap yaz
Cevaplar (1)
orbi
1810 gün önce

Tablo için sıra değiştirirken şöyle bişey kullanmıştım. Bunu li etiketlerinin id'sine göre düzenleyip kullanabilirsin.
En kötü ihtimalle tıkladığı li etiketini Remove ile sil bi sonraki veya bir önceki id'ye göre tekrar append edebilirsin.
<pre>

function move(start, end){
var myTable = $('#myTable tbody tr');
if(start>end){
  myTable.eq(start-1).insertBefore(myTable.eq(end-1));
}else{
  myTable.eq(start-1).insertAfter(myTable.eq(end-1));
}

}
move(1,3);
</pre>

0
#000388