Создайте таблицу HTML, где каждый TR является FORM

Я пытаюсь создать таблицу, где каждая строка является формой. Я хочу, чтобы каждый вход находился в другом делении таблицы, но мне все еще нужно, чтобы, например, все первые входы принадлежали одной и той же головке таблицы и так далее.Создайте таблицу HTML, где каждый TR является FORM

То, что я пытаюсь сделать это редактируемые сетки, более или менее это:

<table> 
    <tr> 
     <form method="GET" action="whatever"> 
      <td><input type="text"/></td> 
      <td><input type="text"/></td> 
     </form> 
    </tr> 
    <tr> 
     <form method="GET" action="whatever"> 
      <td><input type="text"/></td> 
      <td><input type="text"/></td> 
     </form> 
    </tr> 
</table>

Но, видимо, я не могу расположить теги в этом пути (или так это то, что сказал w3c валидатор) ,

Любой хороший способ сделать это?

источник

2010-10-27 vtortola

http://www.hotdesign.com/seybold/ – Stephen

Почему бы не избавиться от форм и не оформить таблицу. –

Как обсуждалось в ответах, кажется, что лучшей альтернативой является использование какого-то AJAX для этого. Следующий вопрос содержит набор плагинов сетки jQuery, которые позволят вам делать то, что вы хотите; надеюсь, вы найдете это полезным. http://stackoverflow.com/questions/159025/jquery-grid-recommendations –

Если вы хотите «редактируемую сетку» то есть таблицы, как структура, которая позволяет сделать любого из строк формы, использование CSS, имитирующая раскладка TABLE тега: display:table, display:table-row и display:table-cell.

Нет необходимости обертывать всю таблицу в форме и не нужно создавать отдельную форму и таблицу для каждой видимой строки таблицы.

Попробуйте вместо этого:

<style> 
DIV.table 
{ 
    display:table; 
} 
FORM.tr, DIV.tr 
{ 
    display:table-row; 
} 
SPAN.td 
{ 
    display:table-cell; 
} 
</style> 
... 
<div class="table"> 
    <form class="tr" method="post" action="blah.html"> 
     <span class="td"><input type="text"/></span> 
     <span class="td"><input type="text"/></span> 
    </form> 
    <div class="tr"> 
     <span class="td">(cell data)</span> 
     <span class="td">(cell data)</span> 
    </div> 
    ... 
</div>

Проблема с обертыванием всей таблицы в ФОРМЕ, что любые и все элементы формы будут отправляться на представить (возможно, что желательно, но, вероятно, нет). Этот метод позволяет вам определить форму для каждой «строки» и отправлять только эту строку данных для отправки.

Проблема с упаковкой тега FORM вокруг тега TR (или TR вокруг FORM) заключается в том, что это недопустимый HTML. FORM по-прежнему будет предоставлять как обычно, но в этот момент DOM нарушается. Примечание. Попробуйте получить дочерние элементы вашего FORM или TR с помощью JavaScript, это может привести к неожиданным результатам.

Обратите внимание, что IE7 не поддерживает эти стили CSS таблицы и IE8 будет нуждаться в декларации DOCTYPE, чтобы получить его в режим «стандартов»: (попробуйте это один или что-то эквивалент)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Любой другой браузер, который поддерживает display: table, display: table-row и display: table-cell должен отображать вашу таблицу данных css так же, как если бы вы использовали теги TABLE, TR и TD. Большинство из них это делают.

Обратите внимание, что вы также можете имитировать THEAD, TBODY, TFOOT, обернув свои группы строк в другой DIV с display: table-header-group, table-row-group и table-footer-group соответственно.

ПРИМЕЧАНИЕ: Единственное, что вы не можете сделать с этим методом, это colspan.

Заканчивать эту иллюстрацию: http://jsfiddle.net/ZRQPP/

источник

2013-03-24 15:14:18 Matthew

Спасибо! Это спасло мой день – eskatos

Таблицы не предназначены для этого, почему бы вам не использовать <div> и CSS?

источник

2010-10-27 17:36:48 Harmen

+31

Таблицы не предназначены для представления табличных данных? Я пытаюсь сделать редактируемую сетку. – vtortola

Я не уверен, что форма считается как данные. Это, безусловно, никогда не подтвердит ваш путь, поскольку существуют определенные ограничения в отношении того, какие теги должны/могут следовать за

или тегом – Prescott

@vtortola ключевым словом является «данные». В вашем примере вы используете его для управления макетом входных форм, не представляя данные конечному пользователю. Может быть, если вы объясните, какова цель таблицы, было бы легче рекомендовать некоторые альтернативы. –

I второй вариант предложения Хармена. Кроме того, вы можете обернуть таблицу в форме и использовать javascript для захвата фокуса строки и настройки действия формы с помощью javascript перед отправкой.

источник

2010-10-27 17:39:15 Prescott

У вас могут быть проблемы с шириной столбца, но вы можете установить их явно.

<table> 
    <tr> 
    <td> 
     <form> 
     <table> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
     </table> 
     </form> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <form> 
     <table> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
     </table> 
     </form> 
    </td> 
    </tr> 
    </table>

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

См: http://api.jquery.com/serialize/

Кроме того, существует целый ряд очень хороших плагинов сетки: http://www.google.com/search?q=jquery+grid&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

источник

2010-10-27 17:40:42 Eli

+11

, безусловно, отвечает на вопрос - но черт побери! :) – Prescott

Это действительно ужасно. – You

Да, этот вопрос, вероятно, является признаком того, что он делает что-то не так, но похоже, что мы должны ответить на этот вопрос в дополнение к тому, чтобы его обмануть. – Eli

это так просто, как не использовать таблицы для разметки, как заявлено Harmen. В конце концов, вы не показываете данные, вы собираете данные.

я возьму, например, вопрос 23 здесь: http://accessible.netscouts-ggmbh.eu/en/developer.html#fb1_22_5

На бумаге это хорошо, как это. Если вам нужно было отобразить результаты, вероятно, это будет нормально.
Но вы можете заменить его на ... 4 абзаца с меткой и select (опция будет заголовками первой строки). Один абзац на строку, это намного проще.

источник

2010-10-27 17:41:54 FelipeAls

Я считаю, что сетка, как правило, отображает данные AND и позволяет редактировать. – Eli

Стол - сложный материал в HTML. Форма тоже. Я бы не стал играть с обоими, когда есть более простые решения, это рецепт для того, чтобы ухудшить оба мира. И я не говорю о сетке (визуальная вещь), есть (или должно быть) 'display: table-cell;' для этого, но из таблицы элементов с ее ограничениями в HTML. – FelipeAls

Если все эти строки связаны, и вам нужно изменить табличные данные ... почему бы просто не обернуть всю таблицу в форму и не изменить GET на POST (если вы не знаете, что не собираетесь отправляя больше, чем максимальный объем данных a GET запрос может отправить).

(Это предполагает, конечно, что все данные собираются в одном месте.)

<form method="POST" action="your_action"> 
<table> 
<tr> 
<td><input type="text" name="r1c1" value="" /></td> 
<!-- ... snip ... --> 
</tr> 
<!-- ... repeat as needed ... --> 
</table> 
</form>

источник

2010-10-27 17:52:19

Это, вероятно, лучшее решение. – Stephen

Если я правильно вас понимаю, вы пытаетесь сделать datagrid, как для отображения существующих данных, так и для редактирования/ввода данных. Лучше всего было бы использовать javascript для создания и создания этого datagrid - там есть много * хороших. –

Если все эти строки связаны, и вы должны изменить табличные данные .. почему бы не просто обернуть всю таблицу в форме и изменить GET на POST (если вы не знаете, что вы не собираетесь отправлять больше, чем максимальное количество данных, которое может отправить запрос GET).

Я не могу обернуть всю таблицу в форме, потому что некоторые поля ввода каждой строки являются типами ввода = «файл», а файлы могут быть большими.Когда пользователь отправляет форму, я хочу POST только поля текущей строки, а не все поля всех строк, которые могут иметь ненужные огромные файлы, вызывая форму для отправки очень медленно.

Итак, я попробовал неправильное вложение: tr/form и form/tr. Однако он работает только тогда, когда вы не пытаетесь динамически добавлять новые входы в форму. Динамически добавленные входы не будут принадлежать неправильно вложенной форме, поэтому не будут представлены. (действительная форма/таблица динамических входов представлены просто отлично).

Вложенность div [display: table]/form/div [display: table-row]/div [display: table-cell] производит неравномерную ширину столбцов сетки. Мне удалось получить равномерную раскладку, когда я заменил Div [Дисплей: таблицы строки], чтобы сформировать [дисплей: настольный ряд]:

div.grid { 
    display: table; 
} 

div.grid > form { 
    display: table-row; 


div.grid > form > div { 
    display: table-cell; 
} 
div.grid > form > div.head { 
    text-align: center; 
    font-weight: 800; 
}

Для макета, чтобы корректно отображаться в IE8:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
... 
<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10" />

Пример вывода:

<div class="grid" id="htmlrow_grid_item"> 
<form> 
    <div class="head">Title</div> 
    <div class="head">Price</div> 
    <div class="head">Description</div> 
    <div class="head">Images</div> 
    <div class="head">Stock left</div> 
    <div class="head">Action</div> 
</form> 
<form action="/index.php" enctype="multipart/form-data" method="post"> 
    <div title="Title"><input required="required" class="input_varchar" name="add_title" type="text" value="" /></div>

было бы гораздо труднее сделать этот код работать в IE6/7, однако.

источник

2012-08-23 06:25:20

Если вы можете использовать javascript и строго требовать его на своем веб-сайте, вы можете поместить текстовые поля, флажки и все, что находится в каждой строке таблицы, и в конце каждой строки (или ссылку класса rowSubmit) «сохранить», , Без какого-либо тега FORM. Форма, которая будет моделироваться JS и Ajax следующим образом:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".rowSubmit").click(function() 
    { 
    var form = '<form><table><tr>' + $(this).closest('tr').html() + '</tr></table></form>'; 
    var serialized = $(form).serialize(); 
    $.get('url2action', serialized, function(data){ 
     // ... can be empty 
    }); 
    }); 
});   
</script>

Как вы думаете?

PS: Если вы пишете в JQuery этом:

$("valid HTML string") 
$(variableWithValidHtmlString)

Он будет превращен в объект JQuery, и вы можете работать с ним, как вы привыкли в JQuery.

источник

2013-03-06 06:47:05 Racky

PS: Если строки добавляются динамически с помощью javascript, событие «click» не будет работать, если определено как показано. В этом случае определите событие jQuery.live() или jQuery.on() – Racky

При использовании JavaScript вариант, и вы хотите, чтобы избежать вложенности таблиц, включает в JQuery и попробуйте следующий метод.

Во-первых, вы должны дать каждой строке уникальный идентификатор, как так:

<table> 
    <tr id="idrow1"><td> ADD AS MANY COLUMNS AS YOU LIKE </td><td><button onclick="submitRowAsForm('idrow1')">SUBMIT ROW1</button></td></tr> 
    <tr id="idrow2"><td> PUT INPUT FIELDS IN THE COLUMNS </td><td><button onclick="submitRowAsForm('idrow2')">SUBMIT ROW2</button></td></tr> 
    <tr id="idrow3"><td>ADD MORE THAN ONE INPUT PER COLUMN</td><td><button onclick="submitRowAsForm('idrow3')">SUBMIT ROW3</button></td></tr> 
</table>

Затем, включают в себя следующие функции в вашем JavaScript для вашей страницы.

<script> 
function submitRowAsForm(idRow) { 
    form = document.createElement("form"); // CREATE A NEW FORM TO DUMP ELEMENTS INTO FOR SUBMISSION 
    form.method = "post"; // CHOOSE FORM SUBMISSION METHOD, "GET" OR "POST" 
    form.action = ""; // TELL THE FORM WHAT PAGE TO SUBMIT TO 
    $("#"+idRow+" td").children().each(function() { // GRAB ALL CHILD ELEMENTS OF <TD>'S IN THE ROW IDENTIFIED BY idRow, CLONE THEM, AND DUMP THEM IN OUR FORM 
     if(this.type.substring(0,6) == "select") { // JQUERY DOESN'T CLONE <SELECT> ELEMENTS PROPERLY, SO HANDLE THAT 
      input = document.createElement("input"); // CREATE AN ELEMENT TO COPY VALUES TO 
      input.type = "hidden"; 
      input.name = this.name; // GIVE ELEMENT SAME NAME AS THE <SELECT> 
      input.value = this.value; // ASSIGN THE VALUE FROM THE <SELECT> 
      form.appendChild(input); 
     } else { // IF IT'S NOT A SELECT ELEMENT, JUST CLONE IT. 
      $(this).clone().appendTo(form); 
     } 

    }); 
    form.submit(); // NOW SUBMIT THE FORM THAT WE'VE JUST CREATED AND POPULATED 
} 
</script>

Так что же мы здесь сделали? Мы дали каждой строке уникальный идентификатор и включили элемент в строку, которая может инициировать отправку уникального идентификатора этой строки. Когда элемент отправки активирован, новая форма динамически создается и настраивается. Затем, используя jQuery, мы клонируем все элементы, содержащиеся в <td>, из строки, которую мы передали, и добавим клоны в нашу динамически созданную форму. Наконец, мы представляем указанную форму.

источник

2013-04-27 10:45:43

Я пробовал этот подход, но я использую запросы ajax, поэтому теперь все эти строки добавляются в нижней части таблицы. Попытка выяснить способ их скрытия. – rii

Хорошее предложение! Чтобы этот код работал в FireFox, мне пришлось добавить 'form.style.display =" none "; document.body.appendChild (form); 'непосредственно перед формой.submit(); И обязательно используйте тот же var idRow вместо id. – ISQ

Удивительный ответ. Спасала меня днями. –

У меня была проблема, аналогичная проблеме, заданной в исходном вопросе. Я был заинтригован девами, стилизованными как элементы таблицы (не знал, что вы можете это сделать!) И дал ему бег. Однако мое решение заключалось в том, чтобы мои таблицы были обернуты в теги, но переименовывали каждый вход и выбирали опцию, чтобы стать ключами массива, которые я теперь разбираю, чтобы получить каждый элемент в выбранной строке.

Вот одна строка из таблицы. Обратите внимание, что ключ [4] тонированное идентификатор строки в базе данных, из которой была получена в этой таблице строка:

<table> 
    <tr> 
    <td>DisabilityCategory</td> 
    <td><input type="text" name="FormElem[4][ElemLabel]" value="Disabilities"></td> 
    <td><select name="FormElem[4][Category]"> 
     <option value="1">General</option> 
     <option value="3">Disability</option> 
     <option value="4">Injury</option> 
     <option value="2"selected>School</option> 
     <option value="5">Veteran</option> 
     <option value="10">Medical</option> 
     <option value="9">Supports</option> 
     <option value="7">Residential</option> 
     <option value="8">Guardian</option> 
     <option value="6">Criminal</option> 
     <option value="11">Contacts</option> 
     </select></td> 
    <td>4</td> 
    <td style="text-align:center;"><input type="text" name="FormElem[4][ElemSeq]" value="0" style="width:2.5em; text-align:center;"></td> 
    <td>'ccpPartic'</td> 
    <td><input type="text" name="FormElem[4][ElemType]" value="checkbox"></td> 
    <td><input type="checkbox" name="FormElem[4][ElemRequired]"></td> 
    <td><input type="text" name="FormElem[4][ElemLabelPrefix]" value=""></td> 
    <td><input type="text" name="FormElem[4][ElemLabelPostfix]" value=""></td> 
    <td><input type="text" name="FormElem[4][ElemLabelPosition]" value="before"></td> 
    <td><input type="submit" name="submit[4]" value="Commit Changes"></td> 
    </tr> 
</table>

Затем в PHP, я использую следующий метод для хранения в массиве ($ SelectedElem) каждый из элементов в строке, соответствующей кнопке submit. Я использую print_r() только для иллюстрации:

$SelectedElem = implode(",", array_keys($_POST['submit'])); 
print_r ($_POST['FormElem'][$SelectedElem]);

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

источник

2013-10-29 00:31:30 NotQuiteAPro

Недостатком этого метода является то, что автозаполнение будет хранить отдельные списки для каждой строки, что может не быть большой проблемой, просто озадачивает конечных пользователей. Кроме того, отправка в виде рядов строк может привести к удалению сервера post_max_limit, который в PHP означает, что он удаляет данные. Это может быть серьезной проблемой, если ваш интерфейс позволяет пользователю добавлять строки в таблицу. –

Создайте таблицу HTML, где каждый TR является FORM

ответ

Смежные вопросы