如何从单元格内的锚访问表行对象？

Question

我有几行的桌子。 我想访问与触发函数populateRow（）的锚在同一行中的值的单元格； （我希望我能清楚地解释它）。 知道怎么做吗？

<tr>
   <td>
         some value
   </td>
   <td>
       <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left" onclick="populateRow();">update</a>
   </td>
</tr>
<tr>
    <td>
          another value
    </td>
    <td>
        <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left" onclick="populateRow();">update</a>
   </td>
</tr>

Answer 1

该populateRow()函数需要知道单击的锚，所以你需要或者通过this把它给它所述锚定器的参考：

onclick="populateRow(this);"

function populateRow(anchor) {
  var row = $(anchor).closest("tr");
  var firstCellValue = row.find("td").first().text();
}

...然后从那里使用.closest()将DOM向上导航到包含tr的元素。

或者，最好将click事件处理程序与jQuery绑定，而不是将其内联到每一行中：

 $(document).ready(function() { $("#idOfYourTable").on("click", "a", function(e) { var row = $(this).closest("tr"); var firstCellValue = row.find("td").first().text(); console.log(firstCellValue); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="idOfYourTable"> <tr> <td>Value 1</td> <td> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left">update</a> </td> </tr> <tr> <td>Value 2</td> <td> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left">update</a> </td> </tr> </table> 

（单击“运行...”按钮以查看其工作。）

Answer 2

我不知道populateRow()函数的作用是什么，但是如果您想在同一tr的第一个td上获取值，则可以尝试测试一下：

的onclick = “警报（$（本）.closest（ 'TR'）找到（ 'TD：第一'。）文本（））”

如果要在populateRow()函数中传递它，则可以：

的onclick = “populateRow（$（本）.closest（ 'TR'）找到（ 'TD：第一'。）文本（））”

或者...如果您传递该元素，然后稍后在您的函数中对其进行处理，则会更加整洁：

的onclick = “populateRow（这）”

function populateRow(elm) {
    var val = $(elm).closest('tr').find('td:first').text();
    alert(val);
}

希望这可以帮助。 祝好运！