0

我正在尝试编写一个简单的脚本来使表能够执行以下操作：

  1. 添加/删除行
  2. 启用对行的排序
  3. 每次添加一行时，在每个字段的末尾添加一个额外的 _numeric 数字。
  4. 排序完成后，将行的排序顺序添加到隐藏字段中，以便我可以通过服务器上的 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 上创建的其他一些帖子的帮助下，我已经获得了添加/删除功能，但如果可以提供任何帮助，将不胜感激，或者如果有人知道自动处理这个问题的插件，那将是更好的。

4

0 回答 0