テーブルに次の機能を持たせるための簡単なスクリプトを作成しようとしています。
- 行の追加/削除
- 行の並べ替えを有効にする
- 行が追加されるたびに、各フィールドの最後に追加の _numeric 番号を追加します。
- 並べ替えが完了したら、非表示のフィールドに行の並べ替え順序を追加して、レコードを作成するためにサーバー上の CF テンプレートを介して処理できるようにします。
これを行うためのプラグインを探してみましたが、これまでのところ運がありません...
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<input type="text" id="order">
<table width="100%" border="0" cellspacing="0" cellpadding="5" id="table-data">
<tr>
<td></td>
<td>First name</td>
<td>Last Name</td>
<td>Email</td>
<td>Options</td>
<td>Add</td>
<td>Remove</td>
</tr>
<tbody>
<tr class="tr_clone" id="listItem_123">
<td class="handle">+</td>
<td><input type="text" id="who" name="who" ></td>
<td><input type="text" id="location" name="location" ></td>
<td><input type="text" id="date_picker" name="start" class="datepicker"></td>
<td><select name="dave">
<option value="">Please Select</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
</select></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
<td><input type="button" name="remove" value="Remove" class="tr_clone_remove"></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$("input.tr_clone_add").live('click', function() {
var counter = 0;
var max_rows = 5;
counter = $('.tr_clone').length;
if( parseInt(counter) < max_rows)
{
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
}
});
$("input.tr_clone_remove").live('click', function() {
$(this).closest("tr").remove();
});
$( "#table-data tbody" ).sortable({
handle : '.handle',
items : 'tr',
update : function(){
var order = $("#table-data").sortable();
}
});
});
</script>
<style>
#table-data{width:800px; margin-left:auto; margin-right:auto;}
td.handle{cursor:move}
</style>
</body>
</html>
Stack Overflow で作成された他の投稿の助けを借りて追加/削除機能を実行しましたが、何か支援を提供できる場合は大歓迎です。または、これを自動的に処理するプラグインを誰かが知っていれば、より良い。