2

我有一个带有表格的 php 页面，用于将人员添加到一个小组中。

对于每个要添加的人，都有一个具有多个表单元素的表单元素，每个元素都根据人的编号命名。例如： 

<div class="user">
<input type="text" name="user1LastName" />
...
</div>
<div class="user">
<input type="text" name="user2LastName" />
...
</div>

对于数据库中的每个人，php 页面都会填充一个表单部分。

要添加其他人，用户可以单击“+”图标，此时页面使用 jQuery 动态填充新的 . 为此，我只是将新的 div html 附加到现有表单中。这意味着 javascript 页面包含所有与 php 页面相同的 html 标记（待附加）。

这似乎是不必要的代码重复。每当我在 php 页面中更改某些内容时，我还必须在 javascript 代码中进行更改。

有没有避免这种代码重复的一般方法？我唯一能想到的是使用 jQuery 从已经存在的 div 中获取 html。但是在这种情况下，用户 n 的表单字段的值将出现在用户 n+1 的新代码中。

谢谢。

4

2 回答 2

1

卡皮西:)？

<div class="user" id="user_1">
<input type="hidden" name="uid[0]" value="1"/>
<input type="text" name="lastname[0]" value="user480029"/>
...
</div>

<div class="user" id="user_2">
<input type="hidden" name="uid[1]" value="2"/>
<input type="text" name="lastname[1]" value="arto"/>
...
</div>

现在，当添加另一个字段时...

<div class="user" id="user_3943094103945">
<input type="hidden" name="uid[]" value=""/>
<input type="text" name="lastname[]" value=""/>
...
</div>

然后你迭代槽$_POST[]做你想做的事。

您在 .user 上有用户 ID，所以我删除用户您可以删除 HTML 的那部分（这更适用于 UX），更重要的是，您没有数百个变量，只有几个可以迭代的数组环形。希望你明白这一点。干杯。

于 2011-04-03T23:17:34.587 回答
0

php 代码应该为 javascript 提供一个“原型”，可以使用 javascript 对其进行修改。这样，即使没有任何用户，javascript 仍然可以工作。这个例子显然缺少很多代码（比如表单），但它应该给你一个想法。我没有测试它，因为我认为无论如何你都必须进行大量修改。

 <script type="application/x-javascript">
  addEventListener("load",function(){
   document.getElementById("add-user").addEventListener("click",function(){
    var node=document.getElementById("prototype-container").getElementsByClassName("users")[0].cloneNode(true),n=document.getElementById("add-user").getElementsByClassName("users").length,list=node.getElementsByTagName("input");
    document.getElementById("user-list").appendChild(node);
    node.id="users_"+(n+1);
    for(var i=0;i<list.length;++i)
     list[i].name&&(list[i].name+="["+n+"]");
   },false);
  },false);
 </script>
</head>
<body>
 <div id="prototype-container">
  <? /* print out a div without any information in it */ ?>
 </div>
 <div id="user-list">
  <? /* print out divs with some infomation in them */ ?>
 </div>
 <button id="add-user">add a user</button>
于 2011-04-04T01:30:16.000 回答