0

1. table1 と table2 の 2 つのテーブルがあります。ここで [追加] ボタンをクリックすると、チェックされた行が table1 から table2 に移動します。コンテンツが table1 から table2 に追加されるため、上から下まで 1 から n の範囲のシーケンス ID を生成する必要があります。table1 から table2 に行を移動するときに、このシーケンス ID を生成するにはどうすればよいですか?

2.次に、[UP] ボタンと [DOWN] ボタンをそれぞれ使用して、table2 の行を上下に移動する必要があります。問題は、テーブル行の移動先に応じてシーケンス値を変更する必要があることです。例: 行を 1 行下に移動すると、シーケンス値を 1 から 2 に変更する必要があります。行の移動方法。

どんなアイデアでも大歓迎です。

ありがとう。

これは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>

もう1つ、ここでUPまたはDOWNボタンをクリックすると、チェックされた行が下にしか移動しません。なぜですか?

4

2 に答える 2

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 に答える
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 に答える