Загрузка формы с входными текстовыми строками, равными переданному номеру переменной, с помощью функции clone

Все, что я хочу сделать (и это было бы достаточно легко с PHP, но я сейчас стараюсь больше изучать javascript, jQuery и интерфейсный код, изменяя сценарии, чтобы понять, что они делают), - это создавать форму с тем же самым количество строк, указанное в переменной "Seats" из предыдущей формы. Затем регистрант может ввести имена гостей, которых они приводят. Я пытаюсь использовать функциональность cloneNode. Но я не могу понять, что здесь происходит, чтобы понять, как определить количество создаваемых строк, не используя кнопку формы Добавить строку, содержащуюся в этом сценарии.

Вот код, с которым я работаю. Я просто хочу, чтобы переменная называла "места" равной числу созданных строк. Спасибо!:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Guest Registration</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Style-Type" content="text/css">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">

var clone;

function addRow(but){

var tbo=but.parentNode.parentNode.parentNode;

tbo.appendChild(clone);

var rows=tbo.getElementsByTagName('tr');
textAreas = getVar("seats");

clone=rows[rows.length-1].cloneNode(true);

orderNames(rows)

}

function removeRow(but){

var thisRow=but.parentNode.parentNode;

var tbo=thisRow.parentNode;

tbo.removeChild(thisRow);

var rows=tbo.getElementsByTagName('tr');

orderNames(rows)

}

function orderNames(rows){
var r = 4;
var i=0,r,j,inp,t,k;


    while(r=rows[i++]){

        inp=r.getElementsByTagName('input');j=0;k=1;

        while(t=inp[j++]){

        if(t.type=="text"){t.name='col_'+k+'_row_'+i;k++;}

        }

    }

}

/*onload=function(){


clone=document.getElementById('mytab').getElementsByTagName('tr')[0].cloneNode(true)

}*/

function getVar(name)
         {
         get_string = document.location.search;         
         return_value = '';

         do { //This loop is made to catch all instances of any get variable.
            name_index = get_string.indexOf(name + '=');
            //alert (name);

            if(name_index != -1)
              {
              get_string = get_string.substr(name_index + name.length + 1, get_string.length - name_index);

              end_of_value = get_string.indexOf('&');
              if(end_of_value != -1)                
                value = get_string.substr(0, end_of_value);                
              else                
                value = get_string;                

              if(return_value == '' || value == '')
                 return_value += value;
              else
                 return_value += ', ' + value;
              }
            } while(name_index != -1)

         //Restores all the blank spaces.
         space = return_value.indexOf('+');
         while(space != -1)
              { 
              return_value = return_value.substr(0, space) + ' ' + 
              return_value.substr(space + 1, return_value.length);

              space = return_value.indexOf('+');
              }

         return(return_value);        
         }



</script>

</head>

<body>

<form action="">
<script>
onload=function(){

 for(i=0; i<4; i++)
clone=document.getElementById('names').getElementsByTagName('tr')[0].cloneNode(true)

addRow(this)


}
</script>

<table width="600" border="1" cellpadding="0" cellspacing="0" id="names">

<tr>

<td>Attendee First Name:<input type="text" name="col_1_row_1" value="Enter First Name"></td>

<td>Attendee Last Name:<input type="text" name="col_2_row_1" value="Enter Last Name"></td>

<td>Attendee Badge Name:<input type="text" name="col_3_row_1" value="Enter Badge Name Name"></td>

<td>Attendee Email Address:<input type="text" name="col_4_row_1" value="Enter Email"></td>

<td><input type="button" value="ADD NEW ROW" onclick="addRow(this)"><br><br>

<input type="button" value="REMOVE THIS ROW" onclick="removeRow(this)"></td>

</tr>

</table>


</form>

</body>

</html>
Источник

1 ответ

Вы можете просто использовать выражение "для". Например (не каламбур):

function addRow(seats)
  htmlValue=document.forms[0].innerHTML;
  for(i=seats;i<=0;i--)
  {
    htmlValue=htmlValue+"<input type='text' id='seat"+i"'/>";
    document.forms[0].innerHTML=htmlValue;
  }
}

По сути, вышеприведенная функция устанавливает значение переменной 'i' равное значению 'seat', создает новый элемент формы с уникальным идентификатором и добавляет его к существующему содержимому формы. Один вычитается из i, и процесс повторяется до тех пор, пока i = 0. По умолчанию осуществляется доступ к первой форме на странице (формы [0]), чтобы выбрать вторую, использовать формы [1] и т. Д.

В результате вы получите количество строк "мест", каждый с уникальным идентификатором. Это то, что вы имели в виду правильно?

Источник
Другие вопросы по тегам