Form elamanlarını taşıma ve silme
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.
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);
}
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>