Question

我想做的一切（用PHP很容易，但是我现在通过修改脚本以了解他们的工作来推动自己学习更多javascript和jQuery以及前端编码）是建立一个表单与“Seats”变量相同的行数从前一个表单中规定。然后，注册人可以输入他们带来的客人的姓名。我正在尝试使用cloneNode功能。但我无法弄清楚这里发生了什么，足以理解如何在不使用此脚本中包含的“添加行”表单按钮的情况下规定创建的行数。

这是我正在使用的代码。我只想要一个变量名称“seat”等于创建的行数。谢谢！

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

Answer 1

你可以使用“for”语句。例如（没有双关语）：

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'相同的值，创建具有唯一id的新表单元素，并将其添加到表单的现有内容中。从i中减去一个并重复该过程直到i = 0。它默认访问页面上的第一个表单（表单[0]），选择第二个表单，使用表单[1]等。

您最终会在表单中找到“席位”行数，每行都有唯一的ID。这就是你的意思吗？

使用克隆函数加载输入文本行等于传递的变量号的表单

1 个答案: