在 HTML 表格中向下滑动和编辑

Question

基本上我有一个 html 表，其中包含来自数据库的一堆数据 （MySQL）。

我希望能够按下链接并获得给定的表格 行向下滑动以展开到编辑区域。

我会使用 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。我真的只是想要一个正常的 为了出现在没有行分隔符的表格行中，有点 这种风格：

<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 来处理整个业务。

Answer 1

不要使用表格。使用 Divs。使用 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
                }
            });
        }

});