Как получить текущее значение тд usig javascript.?

Question

Я повторяю значения td в html, используя тимелеф. Я создаю свою веб-страницу так, что есть кнопки view, Approve.disapprove для каждого повторяющегося элемента td. Теперь, когда пользователь нажимает кнопку VIEW, мне нужно получить доступ к определенному значению td, соответствующему ему. Какие-либо решения о том, как получить доступ к значению td в javascript.?

В настоящее время я использую это в js. но он возвращает весь список значений. не конкретное значение.

 var r = $("#testing #InputRuleName").text();
    alert(r);

Дизайн веб-страницы:

 <ol>
            <table id="testing">
             <tr th:each="RuleNameList : ${model.RuleNameList}">                    
                    <br/>
                    <br/>
              <li>  <td th:id="InputRuleName" th:text="${RuleNameList}" />        
                    <button type="button" onclick="sendresponse()" id="view">VIEW</button>
                    <button type="button" onclick="sendresponse()" id="Approve">APPROVE</button>
                    <button type="button" onclick="sendresponse()" id="DisApprove">DISAPPROVE</button> </li> 
                    <br/>
                </tr>
                </table>
                </ol>

Answer 1

Вы можете получить к нему доступ из event объекта

onclick="sendresponse(event)"

function sendresponse(e) {
 console.log(e.target.parentElement)
}

Answer 2

Если вы нажимаете на td, вы можете использовать currentTarget => https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

$('td').on('click',(el)=>{
console.log(el.currentTarget)
}

Если вы не можете видеть его свойства с event.target => https://developer.mozilla.org/en-US/docs/Web/API/Event/target

$('td').on('click',(el)=>{
//On it's properties you can see parentNodes, parents, childs....
console.log(el.target)
}

Answer 3

Вы можете захватить событие на уровне tr и записать условие для определения источника

изменить tr и поставить фиктивный CSS класс

<tr class="datarow"

Теперь напишите jQuery для этого CSS селектор класса

$(".datarow").on('click', function(e) {
     if(e.target.value == 'view') { //identify if this button is pressed
          //traverse above the button and traverse back inside
          alert( $("td", $(e.target).parent()).text() ); 
     }
});

Объяснение для $("td", $(e.target).parent()), jQuery позволяет выбрать внутри элемента, который уже выбран, первый параметр - строка селектора, второй параметр - ранее выбранный элемент