0

1.我有两个表table1和table2，当你点击添加按钮时，它会将检查的行从table1移动到table2。当内容从 table1 添加到 table2 时，我必须从上到下生成一个从 1 到 n 的序列 ID。当我将行从 table1 移动到 table2 时，如何生成这个序列 ID？

2.其次，我必须分别使用 UP 和 DOWN 按钮来上下移动 table2 中的行。问题是我需要根据表行移动到的位置来更改序列值。例如：如果我将 row 向下移动 1 行，则序列值必须从 1 变为 2。但是，第一行的序列值需要从 2 变为 1，因此始终保持从 1 到 n 的序列顺序，无论如何移动行。

任何想法将不胜感激。

谢谢。

这是jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Insert title here</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
 <script type="text/javascript">
 $(document).ready(function(){
        $('#add').on("click", function(){
            $('#one tbody input:checked').parent().parent().clone().appendTo("#two tbody");
            return false;
        });

        $('#remove').on("click", function(){
            $('#two tbody input:checked').parent().parent().remove();
            return false;
        });

        $(".up,.down").click(function(){
            var row = $('#two tbody input:checked').parents("tr:first");
            if ($('#two tbody input:checked').is(".up")) {
                row.insertBefore(row.prev());
            } else {
                row.insertAfter(row.next());
            }

            //return false;
        });
    });
 </script>
</head>
<body>
<table id="one" style="border:1px solid red;">
    <caption>Table 1</caption>
<thead>
<tr>
<th></th>
<th >ID</th>
<th> Name</th>
<th>System</th>
</tr>
</thead>
    <tbody>
      <tr>
        <td><input type="checkbox" /></td>
        <td>12</td>
        <td>Sam</td>
        <td>FSS</td>
     </tr>

     <tr>
        <td><input type="checkbox" /></td>
        <td>87</td>
        <td>Harry</td>
        <td>MSS</td>
     </tr>
     <tr>
        <td><input type="checkbox" /></td>
        <td>23</td>
        <td>Rita</td>
        <td>MVV</td>
     </tr>
     <tr>
        <td><input type="checkbox" /></td>
        <td>65</td>
        <td>Tom</td>
        <td>RDD</td>
     </tr>   
   </tbody>
</table>

<table id="two" style="border:1px solid green;">
    <caption>Table 2</caption>
<thead>
<tr>
<th></th>
<th >ID</th>
<th>Sequence No</th>
<th>Name</th>
<th>System</th>
</tr>
</thead>
    <tbody>

    </tbody>

</table>
<br><hr><br>
<button id="add">Add</button>
<button id="remove">Remove</button>
<button class="up">UP</button>
<button class="down">DOWN</button>
</body>
</html>

还有一件事，当我点击向上或向下按钮时，选中的行只会向下移动，不知道为什么？

4

2 回答 2

1

我试图尽可能地注释代码以解释发生了什么：

jQuery(function($) {

  var tableOne = $('#one'),
      tableTwo = $('#two'),
      sequenceIndex = $('.sequence').index(),
      moved = [];

  function addChecked(e) {
    tableOne.find(':checked').each(function() {
      var row = $(this).closest('tr'),
          clone;

      // check if the row we're trying to 
      // move has already been moved
      if ($.inArray(row[0], moved) < 0) {

        // cache this row so we 
        // know it's been moved
        moved.push(row[0]);

        // clone and append to table2.
        // store original row as data 
        // so that we can remove from 
        // cache when rows are removed
        clone = row.clone()
          .data('orig', row[0])
          .appendTo(tableTwo.find('tbody'));

        // because table1 doesn't have the same
        // number of columns as table2 we have to
        // create an extra column within the row  
        // to hold the sequence num
        $('<td/>').insertAfter(clone.find('td').eq(sequenceIndex-1));
      }
    });

    updateSequence();
    e.preventDefault();
  }

  function removeChecked(e) {
    tableTwo.find(':checked').each(function() {
      var row = $(this).closest('tr'),
          // get the index of this row within the cache
          position = moved.indexOf(row.data('orig'));

      // remove this row from the cache
      moved.splice(position, 1);

      // remove this row from the DOM
      row.remove();
    });

    updateSequence();
    e.preventDefault();
  }

  function moveUpDown(e) {
    var button = $(this),
        isUp = button.hasClass('up'),
        rows = tableTwo.find(':checked').closest('tr');

    if (!isUp) {
      // if we're going down we need to 
      // reverse the row array so that the
      // rows don't just switch around
      Array.prototype.reverse.call(rows);
    }

    rows.each(function() {
      var checked = $(this),
          nextPrev = checked[isUp ? 'prev' : 'next']();

      // move the row
      if (nextPrev.length) {
        checked[isUp ? 'insertBefore' : 'insertAfter'](nextPrev);
      }
    });

    updateSequence();
    e.preventDefault();
  }

  function updateSequence() {
    tableTwo.find('tr').each(function() {
      var row = $(this),
          sequence = row.index()+1;

      row.find('td').eq(sequenceIndex).text(sequence);
    });
  }

  $('#add').on('click', addChecked);
  $('#remove').on('click', removeChecked);
  $('.up, .down').on('click', moveUpDown);
});

我还必须稍微修改 HTML。我刚刚向.sequenceSequence Num 表头添加了一个类。你可以在这里看到这个工作：http: //jsbin.com/ocesop/1/edit

于 2013-06-12T17:38:57.547 回答
1

你可以这样做： 

$('#add').on("click", function(){
        var clone=$('#one tbody input:checked').parent().parent().clone();
        clone.each(function(){
            $(this).appendTo("#two tbody").attr("id",$(this).index());
        });
        return false;
    });

    $('#remove').on("click", function(){
        $('#two tbody input:checked').parent().parent().remove();
        $('#two tbody tr').each(function(){
            $(this).attr("id",$(this).index());
        });
        return false;
    });

    $(".up,.down").click(function(){
        var row = $('#two tbody input:checked').parent().parent();
        if ($(this).is(".up")) {
            row.each(function(){
                var previndex=$(this).prev().index();
                if(previndex>=0){
                    var rowindex=$(this).index();
                    $(this).attr("id",previndex);
                    $(this).prev().attr("id",rowindex);
                    $(this).insertBefore($(this).prev());
                }
            });
        } else {
            $(row.get().reverse()).each(function(){
                var nextindex=$(this).next().index();
                if(nextindex>=0){
                    var rowindex=$(this).index();
                    $(this).attr("id",nextindex);
                    $(this).next().attr("id",rowindex);
                    $(this).insertAfter($(this).next());
                }
            });
        }

    });

http://jsfiddle.net/QM8Pg/

于 2013-06-12T15:34:31.210 回答