0

基本的に、データベース (MySQL) からのデータの束を含む html テーブルがあります。

リンクを押して、特定のテーブル行を下にスライドさせて編集ゾーンに展開できるようにしたいと考えています。

Ajax を使用して、その編集スペースにデータベースからの詳細データを取り込みます。

だから、これは私のテーブルになります：

<table> 
    <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Value</th> 
        <th>Edit</th> 
    </tr> 
    <tr> 
        <td>1</td> 
        <td>House</td> 
        <td>5000</td> 
        <td><a href="">Edit</a></td> 
    </tr> 
    <tr> 
        <td>2</td> 
        <td>Dog</td> 
        <td>2000</td> 
        <td><a href="">Edit</a></td> 
    </tr> 
    <tr> 
        <td>3</td> 
        <td>Cat</td> 
        <td>1000</td> 
        <td><a href="">Edit</a></td> 
    </tr> 
</table>

Ajax を使用してテーブルの行全体を変更したい場合、tr タグの周りに div を配置するだけでは機能しません。すべての td タグを div で囲む必要があります。私は本当に、このスタイルで、行の区切りなしで表の行に通常の for を表示したいだけです:

<table> 
    <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Value</th> 
        <th>Edit</th> 
    </tr> 
    <tr> 
        <td colspan="4"> 
            <div id="row_1"> 
                <form method="post" action="" > 
                <input type="hidden" name="ID" value="1"> 
                    <table> 
                        <tr> 
                            <td>Name</td> 
                            <td>
                                <input type="text" name="Name" value="House" />
                            </td> 
                        </tr> 
                        <tr> 
                            <td>Value</td> 
                            <td>
                                <input type="text" name="Value" value="5000" />
                            </td> 
                        </tr> 
                        <tr> 
                            <td colspan="2">
                                <input type="submit" />
                            </td> 
                        </tr> 
                    </table> 
                </form> 
            </div> 
        </td>
    </tr>
    <tr> 
        <td><div id="row_2_id">2</div></td> 
        <td><div id="row_2_name">Dog</div></td> 
        <td><div id="row_2_value">2000</div></td> 
        <td><div id="row_2_edit"><a href="">Edit</a></div></td> 
    </tr> 
    <tr> 
        <td><div id="row_3_id">3</div></td> 
        <td><div id="row_3_name">Cat</div></td> 
        <td><div id="row_3_value">1000</div></td> 
        <td><div id="row_3_edit"><a href="">Edit</a></div></td> 
    </tr> 
</table>

スライド全体を行う方法については、すでにアイデアがあります。しかし、私が問題を抱えているのは、ajaxを使用してテーブルの行全体を置き換えることです。何をすべきか、ビジネス全体を処理するために div をどこに配置すればよいか、誰もが考えています。

4

1 に答える 1

1

テーブルを使用しないでください。Div を使用します。jquery を使用します。

$("#myButton").click(function(){

            var dataString = "yourparameters"

            $.ajax({
            type: "GET",
            dataType: "html",
            cache: false,
            url: "yourServlet", 
            data: dataString, 
            success: function(data) {
                $("#yourDiv").html(data);   
                $("#yourDiv").show(); //assumes it was hidden before
                }
            });
        }

});
于 2010-07-14T15:27:45.023 に答える