0

我想要做的（使用 PHP 就很容易了，但我现在通过修改脚本来推动自己学习更多的 javascript 和 jQuery 以及前端编码以了解它们的作用）就是构建一个具有相同功能的表单行数作为“座位”变量从以前的表格中规定。然后登记者可以输入他们所带来的客人的姓名。我正在尝试使用 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>
4

1 回答 1

0

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

您最终会在表单中获得“座位”行数，每行都有一个唯一的 ID。这就是你的意思吧？

于 2010-10-14T01:30:26.387 回答