如何使用javascript获取td的当前值？

Question

我使用 thymeleaf 迭代 html 中的 td 值。我创建的网页使得 td 的每个迭代元素都有 view,approve.disapprove 按钮。现在，当用户按下 VIEW 按钮时，我需要访问与其对应的特定 td 值。关于如何在 javascript 中访问 td 值的任何解决方案。？我目前在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

您可以捕获tr级别的事件并写入条件来识别源

更改 tr 并放置一个虚拟 CSS 类

<tr class="datarow"

现在为该 CSS 类选择器编写一个 jQuery

$(".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允许在已选择的元素内进行选择，第一个参数是选择器字符串，第二个参数是先前选择的元素

Answer 3

如果您单击 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)
}