用jQuery或Angular動態添加或刪除表格行？

Question

這是我的代碼。我正在使用Symfony/Twig來傳遞變量和翻譯字符串（如果有人不確定{{,}},{% trans %}等是什麼）。

請看行，我有glyphicon glyphicon-camera - 我要的是用戶能夠點擊本作，和一個新行直接出現以下含row.getPhoto()內容 - 將只有row.getPhoto()是不會出現的圖標null，所以點擊它就意味着有內容可以顯示。

同樣，再次單擊照片圖標將使該行消失。

我該怎麼做？我不確定是否應該使用jQuery或Angular（我在項目中的其他地方都使用這兩種方法，因此這兩種方法都可以輕鬆使用）。歡迎任何評論，謝謝。

<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> 

只有jQuery的我已經把現在是這樣的，以使該圖標看起來像一個鏈接，當鼠標懸停：

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

Answer 1

你總是可以通過對javascript代碼symphony2變量，所以你可以有一個沿東西線scirpt：

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

你可以有。有的-其他類div元素或TD元素在它開始爲隱藏和使用變量（如你在靜態HTML代碼所做的那樣）。