HTML: возможно ли иметь тег FORM в каждой строке TABLE ROW допустимым способом XHTML?
Я могу лучше всего описать это следующим образом:
Я хочу это (вся таблица в editmode и сохранить кнопку в каждом ряду).
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
<td> </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 ответов
Ты не можешь Единственный вариант - разделить это на несколько таблиц и поместить тег формы вне его. В итоге вы можете вложить ваши таблицы, но это не рекомендуется:
<table>
<tr><td><form>
<table><tr><td>id</td><td>name</td>...</tr></table>
</form></td></tr>
</table>
Я бы полностью удалил таблицы и заменил их на стилизованные элементы html, такие как div и span.
Стоит отметить, что это возможно в HTML5, используя атрибут "form" для элементов ввода:
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
<td> </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 это не работает.
У меня был похожий вопрос и этот ответ в вопросе 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>
Я бы сказал, что вы можете, хотя это не проверяет, и Firefox перестроит код (так что то, что вы видите в "Просмотр сгенерированного источника" при использовании Web Developer, вполне может удивить). Я не эксперт, но ставлю
<form action="someexecpage.php" method="post">
прямо перед
<tr>
а затем с помощью
</tr></form>
в конце строки, безусловно, дает функциональность (проверено в Firefox, Chrome и IE7-9). Работаю для меня, даже если количество ошибок валидации, которое он произвел, было новым личным лучшим / худшим! Никаких проблем не видно как следствие, и у меня довольно сильно стилизованная таблица. Я полагаю, что у вас, как и у меня, может быть динамически создаваемая таблица, поэтому анализ строк таблицы немного неочевиден для нас, смертных. В общем, откройте форму в начале строки и закройте ее сразу после конца строки.
Ответ @wmants в основном "такой же", как и я, на данный момент. Не использовать<form>теги вообще и предотвращают "несоответствующее" вложение тегов. Используйте javascript (в данном случае jQuery) для публикации данных, в основном вы будете делать это с помощью javascript, потому что нужно было обновить только одну строку, а обратная связь должна быть предоставлена без обновления всей страницы (при обновлении всей страницы это нет смысла перебирать все эти тробулы, чтобы разместить только одну строку).
Я прикрепляю обработчик кликов к привязке "обновить" в каждой строке, которая запускает сбор и отправку полей в одной строке. С дополнительнымdata-action в теге привязки может быть указан целевой URL-адрес POST.
Пример HTML
<table>
<tbody>
<tr>
<td><input type="hidden" name="id" value="row1"/><input name="textfield" type="text" value="input1" /></td>
<td><select name="selectfield">
<option selected value="select1-option1">select1-option1</option>
<option value="select1-option2">select1-option2</option>
<option value="select1-option3">select1-option3</option>
</select></td>
<td><a class="submit" href="#" data-action="/exampleurl">Update</a></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="row2"/><input name="textfield" type="text" value="input2" /></td>
<td><select name="selectfield">
<option selected value="select2-option1">select2-option1</option>
<option value="select2-option2">select2-option2</option>
<option value="select2-option3">select2-option3</option>
</select></td>
<td><a class="submit" href="#" data-action="/different-url">Update</a></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="row3"/><input name="textfield" type="text" value="input3" /></td>
<td><select name="selectfield">
<option selected value="select3-option1">select3-option1</option>
<option value="select3-option2">select3-option2</option>
<option value="select3-option3">select3-option3</option>
</select></td>
<td><a class="submit" href="#">Update</a></td>
</tr>
</tbody>
</table>
Пример сценария
$(document).ready(function(){
$(".submit").on("click", function(event){
event.preventDefault();
var url = ($(this).data("action") === "undefined" ? "/" : $(this).data("action"));
var row = $(this).parents("tr").first();
var data = row.find("input, select, radio").serialize();
$.post(url, data, function(result){ console.log(result); });
});
});
Вы просто должны поставить <form ... > тег перед <table> тег и </form> в конце.
Надеюсь, это помогает.
Я опаздываю на вечеринку, но это отлично сработало для меня, и код должен объяснить сам;
<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>
На самом деле у меня есть проблема с формой в каждой строке таблицы, с 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, как если бы ему была отправлена форма (приложение из post[1] = 1, но для реализации этого решения я бы рекомендовал вместо этого работать с завершающим '&' data_str),
все еще мне не нравится это решение, но я вынужден использовать структуру TABLE из-за плагина dataTables jquery...
Если вы попытаетесь добавить форму, деформирующую элемент 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>
Эта проблема по-прежнему актуальна для деформации нескольких ячеек таблицы
Как сказал выше стереоскот, таблицы вложений являются возможным решением, которое не рекомендуется. Избегайте использования таблиц.
<table >
<thead >
<tr>
<th>No</th><th>ID</th><th>Name</th><th>Ip</th><th>Save</th>
</tr>
</thead>
<tbody id="table_data">
<tr>
<td>
<form method="POST" autocomplete="off" id="myForm_207" action="save.php">
<input type="hidden" name="pvm" value="207">
<input type="hidden" name="customer_records_id" value="2">
<input type="hidden" name="name_207" id="name_207" value="BURÇİN MERYEM ONUK">
<input type="hidden" name="ip_207" id="ip_207" value="89.19.24.118">
</form>
1
</td>
<td>
207
</td>
<td>
<input type="text" id="nameg_207" value="BURÇİN MERYEM ONUK">
</td>
<td>
<input type="text" id="ipg_207" value="89.19.24.118">
</td>
<td>
<button type="button" name="Kaydet_207" class="searchButton" onclick="postData('myForm_207','207')">SAVE</button>
</td>
</tr>
<tr>
<td>
<form method="POST" autocomplete="off" id="myForm_209" action="save.php">
<input type="hidden" name="pvm" value="209">
<input type="hidden" name="customer_records_id" value="2">
<input type="hidden" name="name_209" id="name_209" value="BALA BAŞAK KAN">
<input type="hidden" name="ip_209" id="ip_209" value="217.17.159.22">
</form>
2
</td>
<td>
209
</td>
<td>
<input type="text" id="nameg_209" value="BALA BAŞAK KAN">
</td>
<td>
<input type="text" id="ipg_209" value="217.17.159.22">
</td>
<td>
<button type="button" name="Kaydet_209" class="searchButton" onclick="postData('myForm_209','209')">SAVE</button>
</td>
</tr>
</tbody>
</table>
<script>
function postData(formId,keyy){
//alert(document.getElementById(formId).length);
//alert(document.getElementById('name_'+keyy).value);
document.getElementById('name_'+keyy).value=document.getElementById('nameg_'+keyy).value;
document.getElementById('ip_'+keyy).value=document.getElementById('ipg_'+keyy).value;
//alert(document.getElementById('name_'+keyy).value);
document.getElementById(formId).submit();
}
</script>