使用jQuery或Angular动态添加或删除表行？

Question

This is the code I have. I'm using Symfony/Twig to pass the variables and translation strings in (if anyone was unsure what the {{ , }} , {% trans %} etc was for).

Please see the line where I have the glyphicon glyphicon-camera - what I want is for the user to be able to click this, and a new row appears directly below containing the contents of row.getPhoto() - the icon will only appear if row.getPhoto() is not null, so therefore clicking it will always mean there is content to show.

Likewise, clicking the photo icon again will make the row disappear.

How can I do this? I'm not sure if I should use jQuery or Angular (I am using both in other places in the project, so both are easily available for me). Any comments welcome, thank you.

    <table class="table">
    <tr>
        <th width="10%">{% trans %} header.item {% endtrans %}</th>
        <th width="60%">{% trans %} header.action {% endtrans %}</th>
        <th width="10%">{% trans %} header.option1 {% endtrans %}</th>
        <th width="10%">{% trans %} header.option2 {% endtrans %}</th>
        <th width="10%">{% trans %} header.option3 {% endtrans %}</th>
    </tr>

    {% for row in showRows(allItems) %}
        <tr>
            <td>
                {{ row.getItem() }}
            </td>

            <td>
                {{ row.getAction() }} {% if row.getPhoto() is not null %} <span class="pull-right show-hide-photo glyphicon glyphicon-camera"></span>{% endif %}
            </td>

            <td>
                {% if row.getOption1() %}<span class="glyphicon glyphicon-ok"></span>{% endif %}
            </td>

            <td>
                {% if row.getOption2() %}<span class="glyphicon glyphicon-ok"></span>{% endif %}
            </td>

            <td>
                {% if row.getOption3() %}<span class="glyphicon glyphicon-ok"></span>{% endif %}
            </td>
        </tr>
    {% endfor %}
    </table>

Only jQuery I have right now is this, to make the icon appear like a link when hovered over:

    // Photo button
    $('.show-hide-photo').css('cursor', 'pointer');

Answer 1

You can always pass symphony2 variables on javascript code, so you can have a scirpt with something along the lines of:

<scirpt>
$(.glyphicon).click(function(){
     $(.Some-other-class).toggle()
});
</script>

You can have the .Some-other-class div element or td element starting as hidden and with variables in it (like you did in your static html code).

Answer 2

You don't need the css pointer in the js use it in a css class to have it when the page load not when the user click.

And for your click you can do something like this if you photo is a link then :

first use in your twig a <img src="{{row.photo}}" alt="" style="display:none;"/> whenever you want to put the images.

then inside your js in the click photo button

$('.show-hide-photo').on('click', function(){

   $(this).closest('tr').find('img').toggle();

});

$(this) is your show-hide-photo button , closest('tr') will look for the tag which contain your button then find('img') will go find the tag inside that (row) in that case you wont need to bother with ids to select right row etc..