HTML: чи можна мати тег FORM у кожному РЯДКУ ТАБЛИЦИ дійсним способом XHTML?


78

Я можу найкраще описати це наступним чином:

Я хочу це (ціла таблиця в 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>мітки?


3
Оберніть всю свою таблицю тегом форми (і подайте цілу річ) або перетворіть таблицю HTML у структуру, подібну до таблиці, де кожен "рядок" є формою. Дивіться тут: stackoverflow.com/a/15600151/1038812
Matthew

1
Дивіться відповідь Alexx Roche. Я думаю, що його має бути прийнятою відповіддю. Його відповідь справді вирішує проблему.
Fandi Susanto

1
Відповідь Алекс Рош була не найкращою в моєму випадку, я фактично відображаю табличну інформацію.
adg

Відповіді:


42

Ви не можете. Твій єдиний варіант - розділити це на кілька таблиць і помістити тег форми за його межі. У кінцевому підсумку ви можете вкласти свої таблиці, але це не рекомендується:

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

Я б повністю видалив таблиці і замінив їх на стилізовані елементи HTML, такі як divs та span.


3
Погоджено, не використовуйте таблиці, використовуйте мітки та елементи форми та CSS для їх вирівнювання. Див. Websiteoptimization.com/speed/tweak/forms
Dan Diplo

я боявся, що це буде неможливо ... grrr. Хоча
дякую

65
Будь ласка, не будьте "табличнофобськими" за замовчуванням. Існує безліч випадків, коли дані повинні відображатися у формі таблиці, що також може вимагати форми в ньому. Зараз я стикаюся з однією з цих справ. Врешті-решт, ви в кінцевому підсумку імітуєте синтаксис таблиці з різними тегами ...
Пере

89

Варто зазначити, що це можливо в 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.


1
На жаль, це не підтримується ні IE, ні Edge: caniuse.com/#feat=form-attribute
Йоханнес Рудольф

15
достатньо хороша відповідь для тих з нас, хто
байдуже ставиться до іє

1
Я щойно помітив, що надзвичайно стара форма адміністратора (яку ми використовуємо щодня) мала неправильно вкладені форми таблиць, і сьогодні вони перестали працювати у версіях для розробників Chrome і Firefox. Я перемістив те, </form>щоб відповідати початковому тегу, і додав атрибут "form" до всіх полів, пов'язаних із введенням, і форми на основі рядків моментально почали працювати коректно. Я перевірив, і Edge / IEMobile - єдині браузери, які цього не підтримують. Microsoft нещодавно оголосила, що приймає Chromium, тож у майбутньому це може бути не великою проблемою.
James Moberg

64

У мене було подібне запитання, і ця відповідь на питання 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>

3
Це отримує мій голос - дуже чисте рішення (і перевірено працює)!
kwhitley

3

Я б сказав, що можете, хоча це не перевіряє, і Firefox переорганізує код (тому те, що ви бачите у розділі "Перегляд згенерованого джерела" при використанні веб-розробника, може здивувати). Я не фахівець, але викладаю

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

просто попереду

<tr>

а потім використовуючи

</tr></form>

в кінці рядка, безумовно, надає функціональність (протестовано у Firefox, Chrome та IE7-9). Працює для мене, навіть якщо кількість помилок перевірки, які він спричинив, було новим особистим найкращим / найгіршим! Це не спричиняє проблем, і я маю досить стильний стіл. Я думаю, у вас може бути динамічно створена таблиця, як і у мене, саме тому синтаксичний аналіз рядків таблиці для нас, смертних, трохи не очевидний. Отже, в основному відкрийте форму на початку рядка і закрийте її відразу після закінчення рядка.


1

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

Хопте це допомагає.


3
це не буде працювати, оскільки для кожної таблиці є елементи форми з однаковою назвою ...
Ропста

2
Насправді це буде добре працювати - додайте номер рядка до кожного елемента, наприклад, 'r1_name', а потім у наступному рядку 'r2_name', досить легко проаналізувати () їх на сервері
monk.e.boy

10
У багатьох випадках це буде нормально працювати, але якщо у вашій таблиці 1000 рядків, ви, мабуть, не хочете подавати всю річ, коли все, що ви хочете зробити, це оновити один рядок.
Mike

1

Відповідь @wmantly в основному є "такою ж", як я б пішов на даний момент. Не використовуйте <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); });
        });
    });

JSFIddle


0

Насправді у мене проблема з формою в кожному рядку таблиці з 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 замість ФОРМИ, і для цього потрібен 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 так, ніби йому була надіслана форма (окрім повідомлення [1] = 1, але для реалізації цього рішення я б рекомендував мати справу з кінцевим '&' data_str) .

все одно мені це рішення не подобається, але я змушений використовувати структуру TABLE через плагін jQuery dataTables ...


1
Це більше коментар, ніж відповідь ... особливо тому, що ви не пояснюєте, як $('#tr_id :input').each(function(){/*action*/});вирішується проблема.
Ben D

ну, я відредагував повідомлення, щоб детально описати різні сутності jquery, але я думаю, що це більше, ніж коментар: javascript є однією з причин, чому, хоча дані POST будуть надсилатися на сервер, ієрархія DOM не дотримується .. .
Renard

Ви вирішили питання про те, як отримати доступ до inputs за допомогою Javascript, але це ніколи не було проблемою, перш за все ... проблема полягає в тому, що OP бажає, щоб кожен рядок таблиці був формою, яку можна подати. Ваш допис не відповідає на це запитання. Ви можете перетворити це на відповідь, показавши, як використовувати JQuery / javascript для подання дискретних блоків таблиці (скажімо, якщо submitкнопка в кожному рядку захоплює значення з елементів батьківського елемента, trа потім передає ці значення в AJAX пост). Є й інші способи зробити це, вам потрібно показати, як це вирішує проблему ОП
Бен Д

0

Я запізнився на вечірку, але це для мене вдало, і код повинен пояснити себе;

<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>

@pbalaga: Дивіться історію редагування, але оскільки редагування коментар справді застаріло, тож я видалив його.
t0mppa

-1

Якщо ви спробуєте додати форму, що перекручує такий елемент 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>

Ця проблема все ще діє для викривлення кількох комірок таблиці

Як говорив вище стереоскотт, таблиці вкладеності є можливим рішенням, яке не рекомендується. Уникайте використання таблиць.


-1
<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> 

1
Привіт та ласкаво просимо до S / O - і дякуємо за активний внесок! :) Будь ласка, розгляньте можливість розширення Вашої відповіді. Корисно вказати контекст навколо відповіді, а не лише коду. Варто також зазначити, що це питання було задано 2009 р. :) Як написати хорошу відповідь? варто прочитати!
CmdrSharp
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.