jquery - 如何最好地格式化像这样用户可以动态添加子字段的 HTML 表单？ (表？列表？css3？)

Question

我想创建一个如下图所示的表单:

我看到很多使用表格、CSS、列表的方法，但想知道如何最好地实现我所描绘的内容。这个想法是，“学生”有一个与之关联的姓名和年龄，通过单击“添加行”链接，一对新的姓名和年龄字段将出现在它的正下方。

如果有人可以向我建议完成此操作的最佳方法，这样我就不会遇到字段标签位于输入字段左侧的对齐问题，我将不胜感激。我知道使用表格会很简单，但想看看是否有适合现代 HTML5/CSS3 的无表格解决方案。

我离开了这个 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

但是在调整它看起来像我上面的图片时遇到了问题。如果有人可以帮助我展示如何最好地实现这一目标，我将不胜感激。

Answer 1

如果你使用这个脚本:

 var lastUsed=0;

function addGroup()
{
   lastused++;
   namstr='StName'+lastused;
   agestr='StAge'+lastused;
   str='<div> Name: <input type="text" name="'+namstr+'" value="">
   Age: <input type="text" name="'+agestr+'" value=""></div>';
   document.getElementById('formBlock').innerHTML+=str;
}

使用这个 HTML:

<form name="myform" action... etc>
<div id="formBlock">
    Class Name: <input type="text" name="clName" value=''>
    <div> Name: <input type="text" name="StName0" value="">
    Age: <input type="text" name="StAge0" value=""></div>
</div>
<textarea>....etc

</form>

它应该添加它们就好了。我没有包含任何样式，因为我们没有页面布局。样式应该很简单。