Form elamanlarını taşıma ve silme

medesan 1945 gün önce

1,008 defa görüntülendi

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);
}

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (1)

orbi

1945 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>

#000388