0

通常の HTML ページに 4 つのテーブルがあります。これらのテーブルのうち 3 つには、4 番目のテーブルに挿入する必要があるデータが含まれています。また、4 番目のテーブルでこれらの行を削除し、データの元の正しいテーブルに戻すオプションも必要です。私はこれを一例として機能させています。テーブル 1 から行を移動してテーブル 2 に挿入し、テーブル 2 から行を削除してテーブル 1 に挿入し直します。アクションごとに追加ボタンと削除ボタンがあります。以下の jQuery を参照してください。

$(document).ready(function() {
// Setup the "Move Me" links
$(".rowLink").click(function () {
    // get the row containing this link 
    var row = $(this).closest("tr");

    // find out in which table it resides
    var table = $(this).closest("table");

    // move it
    row.detach();

    if (table.is("#table1")) {
        $("#table2").append(row);
    }

        else {
        $("#table1").append(row);

    }   

});

 });

 $(document).ready(function() {
    $('table a').click(function(e) {
        e.preventDefault();
    });
});
4

1 に答える 1

0

サイモンのような仮定で、私はこのソルンを思いつきました...テーブルのIDとその中の行のクラスに同じ名前を付けるだけで、これで解決するはずです

    $(document).ready(function () {
        $(".rowlink").click(function () {
            var row = $(this).closest("tr");
            var table = $(this).closest("table");

            var IDofthetable = table.attr('id');
            var ClassoftheRow = row.attr("class");

            row.detach();

            if (ClassoftheRow==IDofthetable) {  // if it is in the parent table
                $("#tab4").append(row);  //move to table 4
            }
            else {
                $("#"+ClassoftheRow).append(row); //move to parent table
            }
        });
    });

 <table>
        <tr>
            <td>
                <table id="Table1">
                    <tr class="Table1">
                        <td>
                            <input type="submit" value="Move Me 1" name="button" id="buttonTab1_1" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table1">
                        <td>
                            <input type="submit" value="Move Me 1" name="button" id="buttonTab1_2" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table1">
                        <td>
                            <input type="submit" value="Move Me 1" name="button" id="buttonTab1_3" class="rowlink" />
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table id="Table2">
                    <tr class="Table2">
                        <td>
                            <input type="submit" value="Move Me 2" name="button" id="buttonTab2_1" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table2">
                        <td>
                            <input type="submit" value="Move Me 2" name="button" id="buttonTab2_2" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table2">
                        <td>
                            <input type="submit" value="Move Me 2" name="button" id="buttonTab2_3" class="rowlink" />
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table id="Table3">
                    <tr class="Table3">
                        <td>
                            <input type="submit" value="Move Me 3" name="button" id="buttonTab3_1" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table3">
                        <td>
                            <input type="submit" value="Move Me 3" name="button" id="buttonTab3_2" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table3">
                        <td>
                            <input type="submit" value="Move Me 3" name="button" id="buttonTab3_3" class="rowlink" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table id="tab4">
                </table>
            </td>
        </tr>
    </table

>

于 2013-01-29T17:41:17.530 に答える