Question

我正在使用Javascript制作基本的GPA计算器。

这是我的代码：

<div class="list">

    <div class="row">
      <div class="col col-50">Subject 1</div>
      <div class="col"><input type="text" name ="GR1" placeholder="Grade"></div>
      <div class="col"><input type="tel" name="CR1" placeholder="Credits"></div>
    </div>

    <div class="row">
      <div class="col col-50">Subject 2</div>
      <div class="col"><input type="text" name ="GR2" placeholder="Grade"></div>
      <div class="col"><input type="tel" name ="CR2" placeholder="Credits"></div>
    </div>

<button class="button button-positive">
  Add Another Field //it can add uptop 10 fields
</button>

  </div>

它会增加相同的div系列，同时将输入名称增加到10个字段。用户可以点击Add Another Field并添加新的div字段。

在每个div字段中，它只会更改主题和输入字段＆＃39;名称，增量为1.

问题：

实现这一目标的最佳方法是什么，而不是一遍又一遍地重复同样的事情？或者我是否需要首先创建10个div表单并隐藏所有表单并在每次单击时逐个显示它们？请举个例子。

Answer 1

这是一个纯Javascript的解决方案，允许您添加最多10个“字段块”。在HTML文件中，输入：

<div id="list">
    <button onclick="addRow()">Add another field</button>
</div>

这是添加新行的Javascript函数，并初始化第一行的第二行：

<script type="text/javascript">
window.onload = function() {
    addRow();
    addRow();
};

function addRow() {
    var element = document.getElementById('list');
    var nextId = element.childElementCount;
    if (nextId <= 10) {
        var div = document.createElement('div');
        div.setAttribute('class', 'row');
        div.innerHTML = '<div class="col col-50">Subject ' + nextId + '</div><div class="col"><input type="text" name ="GR' + nextId + '" placeholder="Grade"></div><div class="col"><input type="tel" name="CR' + nextId + '" placeholder="Credits"></div>';
        element.insertBefore(div, element.getElementsByTagName('button')[0]);
    }
}
</script>

您可以通过以下小提琴在线试用：https://jsfiddle.net/w82t30r4/

Answer 2

尝试jQuery的clone（read about it here）

$(document).ready(function(){
    $row = $(".row").clone();
    $("button").click(function(){
         $(".list").append($row.clone());
    })
})

正在发生的事情是我克隆行开始（在任何数据进入之前）。然后，当单击按钮时，我将该克隆的克隆添加到.list。

使用Javascript隐藏和显示div系列

2 个答案: