
    <table id="_table_" class="table table-condensed table-bordered ">
        <thead>
            <tr>
                <th width='1px'>Id</th> 
                <th width='200px'>Compte</th> 
                <th width='200px'>Compte Aux.</th>
                <th>Designation</th>
                <th width='150px'>Débit</th>
                <th width='150px'>Crédit</th>
                <th width='75px'>
                    <button id="addRow1" onclick="add_line()" class="btn  btn-sm btn-success" type="button">Nouvelle ligne</button>
                </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

@section('scripts')


<script>
    var counter = 1;
    var t_comptes=({!! json_encode($comptes) !!});
    var t_comptes_aux=({!! json_encode($comptes_aux) !!});

   //Ajouter d'une ligne
    function add_line() {
        var col1_value=counter;
        
        //Comptes        
        options_comptes="<option value=''>A définir</option>";
        $.each(t_comptes, function(i, obj) {
            options_comptes+="<option value='"+obj.id+"'>"+obj.id+"</option>";
        });
        col2_value="<select id='compte_"+counter+"' class='form-control' data-width='100%'>"+options_comptes+"</select>";

        //Comptes Aux
        options_comptes="<option value=''>A définir</option>";
        $.each(t_comptes_aux, function(i, obj) {
            options_comptes+="<option value='"+obj.id+"'>"+obj.id+"</option>";
        });
        col3_value="<select id='compte_aux_"+counter+"' class='form-control' data-width='100%'>"+options_comptes+"</select>";

        var col4_value="<input class='form-control' name='designation_"+counter+"' value='' />";
        var col5_value="<input class='form-control' name='debit_"+counter+"' value='' />";
        var col6_value="<input class='form-control' name='credit_"+counter+"' value='' />";
        var col7_value="<a href='#' id='valideRow' onclick='valideRow("+counter+")' class='btn btn-info btn-sm pull-left' style='margin-right: 3px;'>Valider</a>";
        col7_value+="<a href='#' id='removeRow' onclick='deleteRow("+counter+")' class='btn btn-danger btn-sm pull-left' style='margin-right: 3px;'><span class='ti-trash'></span></a>";
    
        $("#_table_ tbody").append(
            "<tr id='tr_"+counter+"'>" + 
            " <td width='40px' id='td_id_" + counter+"' style=''>" +  col1_value+"</td>" +
            " <td id='td_compte_" + counter+"' style=''>" +  col2_value+"</td>" +
            " <td id='td_compte_aux_" + counter+"' style=''>" +  col3_value+"</td>" +
            " <td id='td_designation_" + counter+"' style=''>" +  col4_value+"</td>" +
            " <td id='td_debit_" + counter+"' style=''>" +  col5_value+"</td>" +
            " <td id='td_credit_" + counter+"' style=''>" +  col6_value+"</td>" +
            " <td id='td_btn_" + counter+"' style=''>" +  col7_value+"</td>" +
            "</tr>"); 
        counter++;
        return;
    }

    function valideRow(counter) {
        alert('valde'+counter);
    }

    function deleteRow(counter) {
        $("#tr_"+counter).remove();
    }

</script>

@endsection