<table class="table table-hover" id="table{{frs.ID_BLOC}}">
    <thead class="thead-dark">
        <tr>
            <th scope="col">{{ 'IDCLE' }}</th>
            <th scope="col">{{ 'ORDRE' }}</th>
            <th scope="col">{{ 'NOM PARAMETRE' }}</th>
            <th scope="col">{{ 'VALEUR_PARAM' }}</th>
            <th scope="col">{{ 'TYPE PARAM' }}</th>
            <th scope="col">
                <a class="ajouter_blanc_v2  white-tooltip"  onClick="ajoutConnecteur();" style="float: right;">
                    <span class="infos_tooltip left">
                        {{ 'Ajouter un paramètre' |trad }}
                    </span>
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        {% for connecteur in paramConnecteur %}
            {% include '@catalogue/Format/_connecteur.twig' %}
        {% endfor %}
    </tbody>
</table>
<script>
    function ajoutConnecteur()
    {
        $.ajax({
            dataType : 'html',
            url: '{{ path('Catalogue.Format.ajaxConnecteur') }}',
            type: "POST",
            success: function(result){
                $('#table > tbody').append(result);
            }
        });
    }

	document.addEventListener('change',(event) => {
		var target = event.target;
		if (!(target instanceof HTMLElement) ) {
			return;
		}

		if ($(target).attr('name') != 'IDCLE[]'){
			return;
		} 

        var paramInput = $(target).parent().parent().parent().find("[name='NOM_PARAMETRE[]']");
        paramInput.empty();

        var new_options = {{ listeConnecteur | json }};

        paramInput.append($('<option>', { 
            value: '',
            text : '' 
        }));
        
        jQuery.each(new_options[$(target).val()], function(i, val) {
            paramInput.append($('<option>', { 
                value: val,
                text : val 
            }));
        });
        
    });
</script>