Question

所以我创建了一个表单，用于将学生姓名及其结果输入数据库。条目数量会有所不同，所以我想在页面加载1行时可以输入数据，而在底部加上+和 - 按钮可以添加或删除额外的行来输入数据。

我尝试添加但收效甚微，但我并不知道如何去除多余的线条。在视觉上它看起来很棒，但点击底部的按钮不做任何事情。任何想法将不胜感激！

这是我的代码：

<center>
<form action= "submit_results.php">

<div class="col-sm-12">
  <table>
    <tr>
      <td><h3>NAME OF PUPIL</h3></td>
      <td><h3>RESULT</h3></td>
    </tr>
</table>
<input type="text" name="name_pupil" id="i">
<input type="text" name="result" id="j">
    <br>
    <br>
    <a class="btn btn-info btn-lg" onclick="add_new_row">
      <span class="glyphicon glyphicon-plus"></span>
    </a>
    <a class="btn btn-info btn-lg" onclick="remove_new_row">
      <span class="glyphicon glyphicon-minus"></span>
    </a>
    <br>
    <br>
<input type="submit" value="Submit">
</div>
</form>
</center>

<script>
var i=0
var j=100
// i want different id numbers for the name of the pupil and their results where results=pupils+100 there will not be more than 100 entries
function add_new_row(){
  for (i++){
  container.appendChild(document.createTextNode("player" + (i+1)));
  var input = document.createElement("input");
  input.type = "text";
  input.name = "member" + i;
  container.appendChild(input);
  // Append a line break
  container.appendChild(document.createElement("br"));

}

function remove_new_row(){
//dont know how to remove them!!
}
</script>

Answer 1

我将简化您的示例，假设您只有一个容器div，您要添加和删除行。行可以是任何东西，在您的情况下，它是输入行。

<div id="container"></div>
<button id="addRow">Add row</button>

没有删除按钮。因为你怎么知道要删除哪一行？卸妆程序必须获取要删除的行的引用。这是一种方法，通过在同一个函数中创建它们：

var idCounter, adder, container

idCounter = 0
adder = document.getElementById( "addRow" )
container = document.getElementById( "container" )

adder.onclick = function () {
   var input, remover, row

   input = document.createElement( 'input' )
   input.type = "text"
   input.name = "member_" + ( ++idCounter )
   input.placeholder = "Add details for member #" + idCounter + "..."

   remover = document.createElement( 'button' )
   remover.textContent = "Remove row"

   row = document.createElement( 'div' )
   row.appendChild( input )
   row.appendChild( remover )

   container.appendChild( row )

   remover.onclick = function ( ) {
     container.removeChild( row ) 
   }
}

您可以在此处看到它：https://jsfiddle.net/ea1trbeb/

逻辑位于javascript的最后两行 - 当您添加一行时，添加一个按钮，该按钮的作用是在单击时删除行。将按钮放在行的旁边是有意义的，所以把它放在同一个div中就可以了。

对于现有的输入行（那些未通过单击adder按钮添加的输入行），您只需要在Javascript代码中直接将逻辑添加到这些按钮。所以 - 你可以给你的remover按钮一个类（如何＆＃34; remover＆＃34;）然后直接为所有这些按钮添加一个处理程序。

var removers = document.querySelectorAll( 'button.remover' )
for ( var i = 0; i < removers.length; i++ ) {
  removers[ i ].onclick = function ( e ) {
    var row = e.target.parentNode
    row.parentNode.removeChild( row ) 
  } 
}

所以每个按钮只找到它的父项并删除它。

更新了小提琴：https://jsfiddle.net/y2wa77y7/

添加和删除额外的表单

1 个答案:

添加和删​​除额外的表单

1 个答案:

添加和删除额外的表单