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

发布于 2024-09-27 16:35:15 字数 3895 浏览 6 评论 0原文

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

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

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

原文

All I want to do (and it would be easy enough with PHP, but I'm pushing myself to learn more javascript and jQuery and front end coding right now by modifying scripts to understand what they do) is to build a form with the same number of rows as the "Seats" variable stipulates from a previous form. Then the registrant can enter the names of the guests they are bringing. I'm trying to use the cloneNode functionality. But I can't figure out what's happening in here enough to understand how to stipulate the number of rows created without using the Add Row form button contained in this script.

Here is the code I'm working with. I just want a variable names "seats" to equal the number of rows created. Thanks!:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尐偏执 2024-10-04 16:35:15

您可以只使用“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 减 1，重复该过程直到 i = 0。
默认情况下，它访问页面上的第一个表单 (forms[0])，选择第二个表单，使用 forms[1] 等。

您最终会得到“座位”行数，每行都有一个唯一的 id，以你的形式。
这就是你的意思吧？

You could just use a "for" statement. For instance (no pun intended):

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;
  }
}

Basically, the above function sets the value of the variable 'i' to the same value as 'seats', creates a new form element with a unique id, and adds it to the existing contents of the form. One is subtracted from i and the process is repeated until i = 0.
It is by default accessing the first form on the page (forms[0]), to select the second, use forms[1], etc.

You'd end up with 'seats' number of rows, each with a unique id, in your form.
This is what you meant right?

回复收藏 0 原文

~没有更多了~