HTML: объединение формы через несколько столбцов td

Я хотел бы сделать что-то подобное в 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 или изменить поведение моей программы.

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

Ответы

Ответ 1

Один из вариантов состоит в объединении столбцов с colspans следующим образом:

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

И стиль макета элемента формы с помощью CSS. Или вы можете пойти с чистым макетом на основе DIV.

Ответ 2

Старая публикация, которую я знаю, но для кого-то еще смотрящего это...

Кажется, что все ответы на данный момент настолько полны решимости ответить на ваш вопрос, что они забывают считать, что может быть намного проще.

Может быть, что скрывается за вашим вопросом, есть причина, по которой вы не можете этого сделать. Но "правильный" HTML-действительный способ сделать то, что вы пытаетесь сделать, - разместить всю таблицу внутри одной формы. Зачем нужна одна форма для редактирования, а другая для удаления?

<form action="/updatePerson" method="post">
<table>
    <thead>
        <tr><th>Person Name</th><th>Fave Color</th><th>&nbsp;</th><th>&nbsp;</th></tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" size="30" value="John" name="name_1"></td>
            <td><input name="favorite_color_1" value="Green"/></td>
            <td><input type="submit" value="Update" name="submit_update_1"></td>
            <td><input type="submit" value="Delete" name="submit_delete_1"></td>
        </tr><tr>
            <td><input type="text" size="30" value="James" name="name_2"></td>
            <td><input name="favorite_color_2" value="Orange"/></td>
            <td><input type="submit" value="Update" name="submit_update_2"></td>
            <td><input type="submit" value="Delete" name="submit_delete_2"></td>
        </tr>
    </tbody>
</table>
</form>

Вам нужно немного логики в вашем ASP/PHP/server-code, чтобы вычислить, какое имя кнопки было нажато, но вам все равно нужно использовать предлагаемое решение.

Ответ 3

Используйте дизайн без таблиц с Div и CSS.

Eg.

<html>
<head>
<style type="text/css">
    #wrapper
    {
        width: 600px;
    }
    #header
    {
        width: 600px;
        height:30px;
    }
    #person
    {
       clear:both;
        width:600px;        }
    .name
    {
    clear:both;
        width: 200px;
        float: left;
        text-align: center;
    }
    .color
    {
        width: 200px;
        float: left;
        text-align: center;
    }
    .submit
    {
        width: 200px;
        float: left;
        text-align: center;
    }
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div class="name">
            <b>Name</b></div>
        <div class="color">
            <b>Favorite Color</b></div>
    </div>
    <div id="Person">
        <form action="/updatePerson" method="post">
        <div class="name">
            <input name="name" value="John" /></div>
        <div class="color">
            <input name="favorite_color" value="Green" /></div>
        <div class="submit">
            <input type="submit" value="Edit Person" /></div>
        </form>
    </div>
</div>
</body>
</html>

Ответ 4

Я проголосую за неприятный Javascript. Это позволит сохранить макет как есть.

Ответ 5

Одним из решений было бы, если бы ваши несколько столбцов были фактически созданы в DIV вместо таблиц.

Ответ 6

Нет, такой формы нет. Но во многих браузерах ваше использование работает так, как вы ожидали, за исключением того, когда вы динамически создаете элементы DOM с такой структурой в FireFox.

Возможно, вы можете выбросить <form> тег, используйте javascript для отправки; Или вы можете использовать <div> для создания макета таблицы.

Ответ 7

Вы могли

a) объединить всю строку таблицы в одной форме и обработать ее с помощью одной серверной script.

или

b) установить form.action с javascript.

Ответ 8

Если вы используете 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 и т.д.). Следите за выберите vals, которые не копируются. Вам нужно будет сделать некоторые обманки (скрытое поле), чтобы отправить текущий выбранный val clone() d select.

Ответ 9

Я пробовал множество способов решить ту же проблему; несколько форм в одной таблице html. FF и Chrome автоматически закрываются, если помещается до или внутри a или из-за не семантически корректного html. Я ценю, что основанный макет разрешил проблему, но если вам нужно "придерживаться табличного макета", вам нужно будет использовать несколько таблиц и обернуть их непосредственно перед и после и тэгами. В моем случае я сделал некоторые небольшие встроенные корректировки CSS, чтобы удалить границу или две, а затем таблица прикладом друг к другу, как если бы они были строками.

Пример: http://jsfiddle.net/chopstik/ve9FP/

Ответ 10

Я столкнулся с той же проблемой, решив ее с помощью Javascript/jQuery. Проблема здесь заключается в том, что форма не может растягиваться по нескольким столбцам в таблице, однако, если форма имеет идентификатор <form id="unique_per_page"...></form>, каждый из автономных элементов формы, таких как input, select или даже textarea, может быть назначен этой форме с использованием атрибута form <input type="text" name="userName" form="specific_form_id">

jquery/javascript, чтобы назначить эти вещи, должен иметь генератор случайных строк, который я захватил из следующего fooobar.com/questions/3112/...

Таким образом, общий код будет выглядеть так:

    $("table tr").each(function(i, el){
        if(!$(el).find("form[name='updatePerson']").attr("id"))
        { //if the form does not have id attribute yet, assign a 10-character random string
            var fname = (Math.random().toString(36)+'00000000000000000').slice(2, 10+2);
            $(el).find("form[name='updatePerson']").attr("id",fname); //assign id to a chosen form
            $(el).find("input").attr("form",fname); //assign form attribute to all inputs on this line
            $(el).find("form[name='deletePerson'] > input").removeAttr("form"); //remove form attribute from inputs that are children of the other form
        }
    });

Код HTML, который вы включили, должен быть обновлен с соответствующими атрибутами имени для форм

<table>
    <tr>
        <th>Name</th>
        <th>Favorite Color</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <form action="/updatePerson" name="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" name="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" name="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" name="deletePerson" method="post">
                <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
                <input type="submit" value="Delete Person"/>
            </form>
        </td>
    </tr>
</table>

Ответ 11

Как я всегда это делал:

<tr>
    <td><form><input name=1></td>
    <td><input name=2></td>
    <td><input type=submit></form></td>
</tr>

Включите форму внутри первого и последнего td, поэтому в реальной текстовой области. Возможно, что действительно старые браузеры закроют форму на /td, но сегодня нет.

В вашем примере:

<tr>
    <td>
        <form action="/updatePerson" method="post">
            <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
    </td>
    <td>    <input name="name" value="John"/></td>
    <td>    <input name="favorite_color" value="Green"/></td>
    <td>
            <input type="submit" value="Edit Person"/>
        </form>
    </td>
    <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>