HTML: расширение формы по нескольким столбцам td

Question

Я бы хотел сделать что-то подобное в HTML. Это недействительный HTML, но цель есть:

<table>
    <tr>
        <th>Name</th>
        <th>Favorite Color</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <form action="/updatePerson" method="post">
            <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
            <td><input name="name" value="John"/></td>
            <td><input name="favorite_color" value="Green"/></td>
            <td><input type="submit" value="Edit Person"/></td>
        </form>
        <td>
            <form action="deletePerson" method="post">
                <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
                <input type="submit" value="Delete Person"/>
            </form>
        </td>
    </tr>
    <tr>
        <form action="/updatePerson" method="post">
            <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
            <td><input name="name" value="Sally"/></td>
            <td><input name="favorite_color" value="Blue"/></td>
            <td><input type="submit" value="Edit Person"/></td>
        </form>
        <td>
            <form action="deletePerson" method="post">
                <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
                <input type="submit" value="Delete Person"/>
            </form>
        </td>
    </tr>
</table>

Очевидно, я не могу этого сделать, потому что у меня не должно быть тега формы внутри элемента <tr>. Единственные альтернативы, которые я вижу, - это использовать неприятный javascript или изменить поведение моей программы.

Какое может быть решение, которое позволило бы мне иметь форму, которая охватывает несколько столбцов, как это?

Answer 1

Если вы используете jQuery, вы можете сделать это:

<script type="text/javascript">
$(function() {
    $('.rowForm').submit(function() {
        //console.log($(':input',$(this).closest('tr')));
        //Because u cant span a form across a table row, we need to take all the inputs, move it to hidden div and submit
        var rowFormContent = $('.rowFormContent',$(this));
        rowFormContent.html('');    //Clear out anything that may be in here            
        $(':input',$(this).closest('tr')).clone().appendTo(rowFormContent);

        return true;
    });
});
</script>

<tr>
 ...
 <td>
   <form action="/cool" method="post" class="rowForm" id="form_row_1">
   <div class="rowFormContent" style="display: none;"></div>
   <input type="submit" value="save">
   </form>
 </td>
</tr>

Побочным эффектом является то, что вы получите дополнительный тип ввода для отправки в форме, но он будет скрыт и не должен причинять вреда. Тонкое замечание здесь - использование:: input. Это сокращение jQuery для всех типов ввода (select, textarea и т. Д.). Остерегайтесь выбранных значений, которые не копируются . Вы должны будете сделать некоторую хитрость (скрытое поле), чтобы передать текущий выбранный val клона () d select.