Как с js tabulator найти элемент внутри ячеек?

Question

[Александр Соболев]

Здравствуйте!
В одной из ячеек строки, по задумке иконка воспроизведения аудио. При нажатии ее класс должен поменяться с play на pause, а все остальные элементы с классом pause наоборот переключиться на play
Трудность в поиске элементов на странице. Это странно, но стандартные селекторы типа jQuery не действуют..
Как бы реализовать задуманное?

formatter:function(cell, formatterParams, onRendered){ 
							return '<i class="fa fa-play" aria-hidden="true" path="'+cell.getValue()+'"></i>'; 
						},

						/*cellClick:function(e, cell){ 							
							jQuery(cell).find("i.fa-play").toggleClass('fa-play').toggleClass('fa-pause'); 
							includePlayer_controller( cell.getValue() ); 
						},*/

						cellClick: function(e, cell){ jQuery(cell).find("i.fa-play", function(){ jQuery(this).toggleClass('fa-play').toggleClass('fa-pause')}) },
					},

Comments

[alekssamos]

Не по теме вопроса, но важно для нас.
aria-hidden="true"
Не надо так. Я уверен, у вас отдельной кнопки под это нет.
aria-label="play" role="button" tabindex="0"
Вот так надо.
Иначе незрячий (слепой) не сможет нажать на эту иконку и придётся лишь для одного этого нажатия просить помощи, чтобы другой человек посмотрел глазами и нажал, а на телефоне ещё и Voiceover / Talkback выключать придётся.
Про userscript и прочие вещи не говорю, речь об обычных посетителях сайтов, не программистов.

Извиняюсь за оффтопик.

Answer 1

[Александр Соболев]

Периодически бывает и так, что спустя время решение находится. Сейчас это дикая смесь, но оно работает. Буду рад если кто предложит более элегантный вид

{title:" ", field:"path", hozAlign:"center", 						
						formatter:function(cell, formatterParams, onRendered){ return '<i class="fa fa-play" path="'+cell.getValue()+'"></i>'; },
						cellClick:function(e, cell){						
														
							var el = cell.getElement().getElementsByClassName('fa')[0];
							var state = el.classList;					
							
							if (state[1] == "fa-pause"){ 
								jQuery(el).removeClass("fa-pause").addClass("fa-play");
								includePlayer_controller( cell.getValue() );
							}
							else{
								var divs = document.getElementsByClassName("fa-pause");
								for (let i = 0; i < divs.length; i++) {
									const div = divs[i];
									div.classList.remove('fa-pause');
									div.classList.add('fa-play');
								}
								jQuery(el).removeClass("fa-play").addClass("fa-pause");
								includePlayer_controller( cell.getValue() );
							}				
								
						},

					},