Скользите вниз и редактируйте в 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, я бы не смог просто поместите div вокруг тега tr, потому что это просто не работает. я нужно, но 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. У кого-нибудь есть представление о том, что делать, где разместить дивы, чтобы позаботиться обо всем этом бизнесе.

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
                }
            });
        }

});