HTML: Возможно ли иметь тег FORM в каждом TABLE ROW в допустимом смысле XHTML?

Ответ 1

Вы не можете. Ваш единственный вариант - разделить это на несколько таблиц и поместить тег формы за его пределы. Вы можете вставить свои таблицы, но это не рекомендуется:

<table>
  <tr><td><form>
    <table><tr><td>id</td><td>name</td>...</tr></table>
  </form></td></tr>
</table>

Я бы полностью удалил таблицы и заменил их стилизованными элементами html, такими как divs и spans.

Ответ 2

Стоит отметить, что это возможно в HTML5, используя атрибут "form" для входных элементов:

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><form id="form1"><input type="hidden" name="id" value="1" /></form></td>
        <td><input form="form1" type="text" name="name" value="Name" /></td>
        <td><input form="form1" type="text" name="description" value="Description" /></td>
        <td><input form="form1" type="submit" value="Save" /></td>
    </tr>
    <tr>
        <td><form id="form2"><input type="hidden" name="id" value="1" /></form></td>
        <td><input form="form2" type="text" name="name" value="Name" /></td>
        <td><input form="form2" type="text" name="description" value="Description" /></td>
        <td><input form="form2" type="submit" value="Save" /></td>
    </tr>
</table>

Несмотря на то, что он чист в отсутствие JS и использует оригинальные элементы, к сожалению, это не работает в IE10.

Ответ 3

У меня был похожий вопрос и этот ответ в вопросе HTML: таблица форм? решил это для меня. (Не уверен, что это XHTML, но он работает в браузере HTML5.)

Вы можете использовать css, чтобы назначить разметку таблицы другим элементам.

.table { display: table; } 
.table>* { display: table-row; }
.table>*>* { display: table-cell; }

Затем вы используете следующий действительный HTML.

<div class="table"> 
    <form>
        <div>snake<input type="hidden" name="cartitem" value="55"></div>
        <div><input name="count" value="4" /></div>
    </form>
</div>

Ответ 4

Вам просто нужно поместить тег <form ... > перед тегом <table> и </form> в конце.

Хопте это помогает.

Ответ 5

Я бы сказал, что вы можете, хотя это не подтверждается, и Firefox будет переустанавливать код (так что вы видите в "View generated source" при использовании веб-разработчика вполне может удивить). Я не эксперт, но ставя

<form action="someexecpage.php" method="post">

перед опцией

<tr>

а затем используя

</tr></form>

в конце строки, безусловно, дает функциональность (протестирована в Firefox, Chrome и IE7-9). Работа для меня, даже если количество ошибок проверки, которые оно произвело, было новым личным лучшим/худшим! Никаких проблем не было видно, и у меня есть таблица с довольно высоким стилем. Я думаю, у вас может быть таблица с динамически созданной, как и я, поэтому разбор строк таблицы немного неочевиден для нас, смертных. Итак, в принципе, откройте форму в начале строки и закройте ее сразу после окончания строки.

Ответ 6

Если вы попытаетесь добавить форму, деформирующую элемент tr, подобный этому

<table>
<form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</form>
</table>

некоторые браузеры в процессе рендеринга закрывают тег формы сразу после объявления, оставляющего входные данные вне элемента

что-то вроде этого

<table>
    <form></form>
    <tr>
    <td><input type="text"/></td>
    <td><input type="submit"/></td>
    </tr>
    </table>

Эта проблема по-прежнему действительна для разбиения нескольких ячеек таблицы

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

Ответ 7

На самом деле у меня есть проблема с формой в каждой строке таблицы с javascript (фактически jquery):

как сказал Lothre1, "некоторые браузеры в процессе рендеринга закрывают тег формы сразу после объявления, оставляющего входы вне элемента"

который делает мои поля ввода вне формы, поэтому я не могу получить доступ к дочерним элементам моей формы через DOM с помощью JAVASCRIPT..

обычно следующий код JQUERY не будет работать:

$('#id_form :input').each(function(){/*action*/});
// this is supposed to select all inputS 
// within the form that has an id ='id_form'

НО приведенный пример не работает с отображаемым HTML:

<table>
    <form id="id_form"></form>
    <tr id="tr_id">
    <td><input type="text"/></td>
    <td><input type="submit"/></td>
    </tr>
    </table>

Я все еще ищу чистое решение (хотя использование параметра TR 'id' для перехода в DOM устранит эту конкретную проблему)

грязное решение будет (для jquery):

$('#tr_id :input').each(function(){/*action*/});
// this will select all the inputS
// fields within the TR with the id='tr_id'

приведенный выше пример будет работать, но он не является действительно "чистым", потому что он ссылается на TR вместо FORM, и для этого требуется AJAX...

EDIT: полный процесс с jquery/ajax будет:

//init data string
// the dummy init value (1=1)is just here 
// to avoid dealing with trailing &
// and should not be implemented
// (though it works)
var data_str = '1=1'; 
// for each input in the TR
$('#tr_id :input').each(function(){

 //retrieve field name and value from the DOM
 var field = $(this).attr('name');
 var value = $(this).val();

 //iterate the string to pass the datas
 // so in the end it will render s/g like
 // "1=1&field1_name=value1&field2_name=value2"...
 data_str += '&' + field + '=' + value; 


});

//Sendind fields datawith ajax 
// to be treated 
$.ajax({
 type:"POST",
 url: "target_for_the_form_treatment",
 data:data_string,
 success:function(msg){
    /*actions on success of the request*/
 });
});

таким образом, "target_for_the_form_treatment" должен получать данные POST, как если бы ему была отправлена ​​форма (appart from post [1] = 1, но для реализации этого решения я бы рекомендовал иметь дело с конечным "&" of вместо этого вместо data_str).

Мне все равно не нравится это решение, но я вынужден использовать структуру TABLE из-за плагина jQuery dataTables...

Ответ 8

Я опаздываю на вечеринку, но это отлично поработало для меня, и код должен объяснить сам;

<script type="text/javascript">
    function formAJAX(btn){
        var $form = $(btn).closest('[action]');
        var str = $form.find('[name]').serialize();
        $.post($form.attr('action'), str, function(data){
            //do stuff
        });
    }
<script>

HTML:

<tr action="scriptURL.php">
    <td>
        Field 1:<input type="text" name="field1"/>
    </td>
    <td>
        Field 2:<input type="text" name="field2" />
    </td>
    <td><button type="button" onclick="formAJAX(this)">Update</button></td>
</tr>