我想将行添加到已经动态生成的处方集中。
这是我尝试做的事情:
首先我生成视图:
<p><pre>display: block</pre> - doesn't cause hover effect outside of link </p>
<ol>
<li><a href="#">Sample text</a></li>
<li><a href="#">Sample text</a></li>
<li><a href="#">Sample text</a></li>
</ol>
我想要的是使用自己的删除按钮和相同的div生成一个空输入。
以下是我的两次尝试。
首先使用纯Javascript:
@foreach($items as $item)
<div class="form-group col-sm-2">
<input type="text" class="form-control" name="item[]" value="{{$item->name}}">
</div>
<div class="form-group col-sm-1">
<button class="btn btn-danger-outline btn-sm" id="deleteitem">
<i class="fa fa-trash"></i> Delete
</button>
</div>
<div class="row" id="addrow"></div>
@endforeach
使用Javascript:
<div class="card-footer">
<button onclick="addInput(addrow);" type="button" id="addItem" class="btn btn-theme-outline btn-sm"><i class="fa fa-plus"></i>Add item</button>
</div>
这会在彼此之间创建我显然不想要的div。此外,新元素将在第一个div之后添加。
我对jQuery的第二次尝试:
var counter = 0;
function addInput(divName) {
var inputdiv = document.createElement('div');
inputdiv.id = "item"+counter;
inputdiv.className = "form-group col-sm-2";
inputdiv.innerHTML = "<input type='text' name='myitems[]' class='form-control'>";
document.getElementById(divName).append(inputdiv);
var buttondiv= document.createElement('div');
buttondiv.id = "button"+counter;
buttondiv.className = "form-group col-sm-1" ;
buttondiv.innerHTML = "<button class='btn btn-danger-outline btn-sm'><i class='fa fa-trash'></i> Löschen</button>";
document.getElementById("item"+counter).append(buttondiv);
var rowdiv = document.createElement('div');
rowdiv.id ="row"+counter;
rowdiv.className = "row";
document.getElementById("button"+counter).append(rowdiv);
}
使用Javascript:
<div class="card-footer">
<button type="button" id="addItem" class="btn btn-theme-outline btn-sm"><i class="fa fa-plus"></i>Add item</button>
</div>
这次我尝试了一个li来测试它是否会附加到最后一个孩子身上,而是附加到第一个孩子身上。
每次点击最后一个输入的新项目按钮时,如何添加/删除@foreach中的元素?
答案 0 :(得分:1)
<div id="group">
@foreach($items as $item)
<div class="form-group col-sm-2">
<input type="text" class="form-control" name="item[]" value="{{$item->name}}">
</div>
<div class="form-group col-sm-1">
<button class="btn btn-danger-outline btn-sm" id="deleteitem">
<i class="fa fa-trash"></i> Delete
</button>
</div>
@endforeach
</div> <!-- / #group -->
jQuery的:
$(document).ready(function(){
$("#addItem").click(function(){
$("#group").append(template);
});
});
答案 1 :(得分:1)
所以你在循环中的每次迭代都要重复id='addrow'
?你将会有一堆重复的id。它可能会附加到第一个addrow
然后打破。我将整个循环包装在一个容器中,然后附加到:
<div id="container">
@foreach($items as $item)
<div class="form-group col-sm-2">
<input type="text" class="form-control" name="item[]" value="{{$item->name}}">
</div>
<div class="form-group col-sm-1">
<button class="btn btn-danger-outline btn-sm" id="deleteitem">
<i class="fa fa-trash"></i> Delete
</button>
</div>
@endforeach
</div>
$(document).ready(function(){
$("#addItem").click(function(){
$("#container").append("<li>Appended item test</li>");
});
});