HTML: возможно ли иметь тег FORM в каждой строке TABLE ROW допустимым способом XHTML? - PullRequest
68 голосов
/ 08 августа 2009

Я могу лучше всего описать это следующим образом:

Я хочу это (вся таблица в editmode и кнопка сохранения в каждой строке).

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><input type="hidden" name="id" value="1" /></td>
        <td><input type="text" name="name" value="Name" /></td>
        <td><input type="text" name="description" value="Description" /></td>
        <td><input type="submit" value="Save" /></td>
    </tr>
    <tr>
        <td><input type="hidden" name="id" value="2" /></td>
        <td><input type="text" name="name" value="Name2" /></td>
        <td><input type="text" name="description" value="Description2" /></td>
        <td><input type="submit" value="Save" /></td>
    </tr>
    <!-- and more rows here ... -->
</table>

Куда мне положить <form> теги?

Ответы [ 8 ]

71 голосов
/ 20 июля 2014

Стоит отметить, что это возможно в 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.

58 голосов
/ 05 июня 2013

У меня был похожий вопрос, и этот ответ в вопросе 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>
37 голосов
/ 08 августа 2009

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

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

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

3 голосов
/ 09 августа 2012

Я бы сказал, что вы можете, хотя это не проверяет, и Firefox перестроит код (так что то, что вы видите в «Просмотр сгенерированного источника» при использовании Web Developer, вполне может удивить). Я не эксперт, но ставлю

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

только впереди

<tr>

, а затем с помощью

</tr></form>

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

1 голос
/ 08 августа 2009

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

Надеюсь, это поможет.

0 голосов
/ 29 декабря 2013

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

<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>
0 голосов
/ 11 октября 2012

На самом деле у меня проблема с формой в каждой строке таблицы, с 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 ...

РЕДАКТИРОВАТЬ: полный процесс с 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, но для реализации этого решения я бы порекомендовал заняться завершающим '&' из вместо data_str).

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

0 голосов
/ 23 сентября 2012

Если вы попытаетесь добавить форму, деформирующую элемент 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>

Эта проблема все еще актуальна для деформации нескольких ячеек таблицы

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...