@{section header}
<title>مونگو دی بی - درج گروهی</title>
<style>
    .listShow-N2 table{border:none;margin:2%;width:96%;}
    .listShow-N2 table tr:nth-child(odd){background-color:#ccc;}
    .listShow-N2 table tr:nth-child(even){background-color:#ddd;}
    .listShow-N2 table td{padding:0;margin:0px;}
    .listShow-N2 table td input{width:100%;}
</style>
@{end}
<div class="Hrow">
	<div class="Hcontainer Hcontainer-90 Hpadd-2per">
    <div id="list" class="listShow-N2 Hltr">
        <h2>مونگو دی بی - درج گروهی در مجموعه  &nbsp; @{!model.collection} </h2>
        <form id="delfrm" name="delfrm" action="" method="post">
            <div class="Hrow Hpadd-10 Hltr"  >
                <p>مثال : "_id":"435","name":"farid","family":"عسگری پور", ...</p>
                <table id="darj">
                    <tr>
                        <td></td>
                        <td width="95%">
                        <input type="text" name="up1" value=""/>
                        </td>
                    </tr>
                </table>
                <b id="insert-jsfeild"  class="fas  Hbtn-mini fa-plus Hbg-green" data-color="#fff"></b>
            </div>
            <input type="hidden" id="countlist" name="countlist" value="-1"/>
            <input type="submit" class="Hfloat-L Hbtn-auto Hbtn-yellow2" value=" ثبت "/>
        </form>
    </div>
	</div>
</div>
@{section footer}
<script type="text/javascript">
var cunter=1;
function remove_jsfeild(itm){
    document.getElementById("countlist").value=document.getElementById("countlist").value.replace("-"+itm.nextElementSibling.name.replace("up",""),"");
    itm.parentElement.parentElement.remove();
}
$(document).ready(function(){
    $("#insert-jsfeild").click(function(){
        $("#countlist").val($("#countlist").val()+"-"+(cunter+1));
        var n='<tr><td><b  class="fas  Hbtn-mini fa-close Hbg-digired" onclick="remove_jsfeild(this);" data-color="#fff"></b>'
        +'</td><td><input type="text" name="up'+ ++cunter+'" value=""/></td></tr>';
        $("#darj").append(n);
    });
});    
</script>
@{end}