Блог

Я пишу простую форму на работе, используя HTML, и добавил JavaScript на страницу, чтобы пользователи могли добавлять дополнительные строки в таблицу. В этой таблице есть теги input type = «Text» и теги select. Когда пользователь нажимает кнопку, чтобы добавить строку, JavaScript добавляет строку, но очищает теги ввода и выбора.

Мой скрипт

 var x = x   1;
function another()
{ 
  x = x   1;
  y = y   1;
  var bigTable = document.getElementById("bigTable");  
  bigTable.innerHTML  = ("<TR><TD CLASS="bigTable2" ALIGN="Center"><SELECT         
    NAME="PO"   x   ""><OPTION>Select</OPTION><OPTION>1234567890</OPTION></SELECT>
    </TD><TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="SKU"   x 
      ""></TD><TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" 
    NAME="modelNum"   x   ""></TD><TD CLASS="bigTable2" ALIGN="Center"><INPUT 
    TYPE="Text" NAME="itemNum"   x   ""></TD><TD CLASS="bigTable2" 
    ALIGN="Center"><INPUT TYPE="Text" NAME="qty"   x   "" ID="qty" x "" 
    onBlur="total();"></TD></TR>");
}
  

Я не уверен, в чем здесь проблема. Является ли оператор » =» в основном сбросом моей таблицы, как это сделал бы оператор =?

РЕДАКТИРОВАТЬ: я не знаю, как отобразить весь код, но то, что отображается, — это не весь мой код. У меня есть базовая таблица, и с помощью JavaScript я использую оператор = для добавления в нее HTML.

РЕДАКТИРОВАТЬ: моя таблица такая:

 <TABLE ID="bigTable">
  <TR>
    <TH>P.O. #</TH>
    <TH>SKU #</TH>
    <TH>Model #</TH>
    <TH>Item #</TH>
    <TH>Quantity</TH>
  </TR>
  <TR>
    <TD CLASS="bigTable" ALIGN="Center">
    <SELECT NAME="PO1">
      <OPTION>Select</OPTION>
      <OPTION>1234567890</OPTION>
    </SELECT>
    </TD>
    <TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="SKU1"></TD>
    <TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="modelNum1"></TD>
    <TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="itemNum1"></TD>
    <TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="qty1" ID="qty1" onBlur="total();"></TD>
    </TR>
</TABLE>
  

Мой JavaScript копирует все между тегами. И я использую переменную x для обновления числа в именах входных данных и выпадающих списков. Переменная Y используется для увеличения функции вычисления.

Когда вы редактируете innerHTML HTML-элемент, весь DOM повторно анализируется. Поскольку входные значения на самом деле не хранятся в HTML входных элементов, они очищаются.

Одним из вариантов было бы использовать манипуляции с DOM для добавления строки:

 function another(){ 
    x = x   1;
    y = y   1;
    var bigTable = document.getElementById("bigTable");  
    vat tr = document.createElement('tr');
    tr.innerHTML = ("<td class='bigTable2' align='Center'><select name='PO"   x   "'><option>select</option><option>1234567890</option></select></td>" 
        "<td class='bigTable2' align='Center'><input type='Text' name='SKU"   x   "'></td>" 
        "<td class='bigTable2' align='Center'><input type='Text' name='modelNum"   x   "'></td>" 
        "<td class='bigTable2' align='Center'><input type='Text' name='itemNum"   x   "'></td>" 
        "<td class='bigTable2' align='Center'><input type='Text' name='qty"   x   "' ID='qty"   x   "' onBlur='total();'></td>");

    bigTable.appendChild(tr);
}
  

Обратите внимание, что строка больше не содержит <tr> тега.
Этот код создает tr элемент, затем добавляет к нему строки, а затем добавляет это целое (проанализированное) tr в таблицу.

(Я также изменил теги / атрибуты на нижний регистр и заменил все " на ' , чтобы сделать его более читаемым)

Чтобы было понятно, x = y это то же самое, что писать x = x y . Здесь происходит то, что вы перезаписываете HTML тем, что у вас было, плюс новая строка. Это очищает ваши входные данные, потому что их значения не сохраняются в HTML (когда вы вводите внутри одного из входных данных, его свойство «значение» не обновляется в фактическом HTML).

Таким образом, вы в основном перезаписываете свой HTML тем, что было там изначально, плюс некоторые добавленные узлы.

РЕДАКТИРОВАТЬ: перейдите к решению Cerbrus. Намного чище.

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