Переключить tr, когда я нажимаю на указанный элемент внутри td

Question

У меня есть этот код в jquery, а внутри td у меня есть div, называемый стрелкой, когда я нажимаю на него, я хочу переключить следующий tr. Но этот div находится внутри td. Я пытался использовать nextUntil, но он работает только тогда, когда я нажимаю на весь TR, я хочу, чтобы эта работа работала, когда я нажимаю только стрелку div.

        $('div.arrow').click(function(){
          $(this).nextUntil('tr.line-addendum').css('display', function(i,v){
            return this.style.display === 'table-row' ? 'none' : 'table-row';
          });
        });

        <tr class="line-validity">  
          <td class="field" nowrap> 
            <div class="arrow">
              <img src="/WebSoc/imagens/setaAudio.gif" alt="Associa" border="0">
            </div>
          </td>   
        </tr>
       <tr class="line-addendum"></tr>

Итак, когда я нажимаю на стрелку div, я хотите переключить добавление строки TR

Answer 1

Чтобы получить следующую строку из td, используйте:

 var tr = $(this).closest("tr");

, чтобы получить содержащий tr, тогда вы можете использовать tr.next() или эквивалент.

Обратите внимание, что .nextUntil получит все строки до соответствующей строки (за исключением совпадающей строки). Чтобы переключать дополнение, а не строки между ними, вы можете использовать:

tr.nextAll(".line-addendum").first() 

, чтобы получить соответствующее дополнение. (это может не соответствовать вашим точным требованиям, поэтому может быть расширено в вопросе)

Предоставление (при сохранении большей части исходного кода):

$('div.arrow').click(function() {
  $(this)
    .closest("tr")
    .nextAll('tr.line-addendum')
    .first()
    .css('display', function(i, v) {
      return this.style.display === 'table-row' ? 'none' : 'table-row';
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="line-validity">
  <td class="field" nowrap>
    <div class="arrow">
     Associa
    </div>
  </td>
</tr>
<tr class="line-addendum" style='display:none'>
  <td>addendum</td>
</tr>
</table>