Проблема с Javascript и дублированием форм

Question

У меня есть HTML-код, который выглядит примерно так:

< tr id="500" >
 < form id="500" onsubmit="DoThis()">
  < td>Info< /td>
    etc...
    etc...
  < td>Info< /td>
 < /form> 
< /tr>

Что я пытаюсь сделать в Javascript, это сделать копию элемента и добавить ее в родительскую таблицу:

var TrElement = document.getElementById ("500")

var parent    = TrElement.parent;
var NewTr     = TrElement.cloneNode(true);
    parent.appendChild(NewTr);

Этот код создает новую копию, которая идеально лежит на столе. Проблема в том, что я не могу ничего отправить, потому что новый элемент закрыл свою форму: Теперь это выглядит так:

< tr id="500">
 < form id="500" onsubmit="DoThis()" />   <----- end tag on the form :/
  < td>Info< /td>
    etc...
    etc...
  < td>Info< /td>
< /tr>

Кто-нибудь знает, как я могу заставить форму не закрываться, или есть другое решение этой проблемы?

Спасибо ...

Answer 1

Я думаю, у вас проблемы, потому что ваш HTML-код недействителен. Форма не может быть дочерним элементом строки таблицы, она должна находиться внутри элемента таблицы. Кроме того, вы не можете присвоить одинаковое значение идентификатора как строке, так и самой форме. Все идентификаторы элементов должны быть уникальными и начинаться с буквы .

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

Что касается коллизий идентификаторов, вы можете добавить к идентификатору строку типа "row_" или "form_", чтобы различать их.

Если бы вы могли предоставить больше информации о том, что вы пытаетесь выполнить, я мог бы улучшить этот ответ.

Answer 2

Здесь довольно много проблем.

<tr id="500">
    <form id="500" onsubmit="DoThis()">

У вас не может быть «id», начинающегося с цифры. Вы не можете иметь два одинаковых значения id в одном документе. Вы не можете иметь непосредственно внутри

, что является причиной проблемы здесь. Для меня даже первая форма не работает.

var TrElement = document.getElementById("500")

Какой?

var parent    = TrElement.parent;

Должен быть parentNode.

var NewTr     = TrElement.cloneNode(true);
parent.appendChild(NewTr);

Теперь у вас есть еще один два элемента с id = "500"! Вы должны изменить идентификаторы клонированных элементов перед добавлением их в документ.

Есть несколько подходов, которые вы можете использовать здесь. Если все поля формы находятся в одной ячейке, вы можете просто поместить форму внутри ячейки. Однако если вам нужны поля в нескольких ячейках, то форма должна выходить за пределы таблицы.

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

Answer 3

Что я должен делать: у меня есть много строк в моей таблице. эти строки содержат информацию об элементе. скажи так:

Пока пользователь выпадает из «поля даты», Javascript проверит, есть ли какие-либо элементы с такой же датой, которые существуют в базе данных. (Не все данные представлены в строках, некоторые все еще находятся в базе данных)

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

новая строка также должна иметь возможность представлять отредактированные данные.

Но так как <форма> закрывается, я не могу отправить какие-либо данные.

Сложно объяснить, но я надеюсь, что вы понимаете