Question

我正在尝试浏览已单击的表行，以从行的其他部分提取数据。

这是点击的行的HTML代码段：

<tr><td class=" sorting_1">Foobar</td>
    <td>Hello</td><td><a href="/some/path/abc.html">42</a></td>
    <td>0</td>
    <td><img src="/images/img.gif"></td>
    <td>7:44 AM</td>
    <td><ul><li><a href="/path2/read/3">Read it</a></li>
            <li><a class="booboo" href="#">Just do it</a></li>
        </ul></td>

单击的单元格元素具有“booboo”类。

我希望能够选择以下数据：

在前一个兄弟的网址中使用的id（在上面给出的示例中为3）
第一列中的名称（在给出的示例中为'Foobar'）
第二个单元格中的锚元素的url（本例中应为/some/path/abc.html）

是否可以指出导航表格行所需的功能，最好使用显示如何选择上面示例代码段中的值的代码段？

Answer 1

No hill for a climber ...

$("table a.booboo").click(function() {
    var $this = $(this);
    var tr = $this.closest("tr"); 

    // the id used in the url of the previous li a sibling
    var a = $this.closest("ul").find("li:first a").attr("href");
    a = a.substring(a.lastIndexOf("/") + 1);
    alert(a);

    // the name in the first column
    var b = tr.find("td:first").text();
    alert(b);

    // the url of the anchor elem in the 2nd cell
    var c = tr.find("td:eq(2) a").attr("href");
    alert(c);
});

Demo on jsFiddle

Answer 2

您需要文档的"traversing" section中的各种方法，特别是：

parent从点击a的{{1}}开始。
li从prev转到上一个li。
~~li（可能parents）到达行本身。~~ Gah！作为Josh points out，我的意思是{{ 1}}。（我使用 .parents("tr:first")。然而......）
closest查找行内的元素（例如，closest以获取第一个单元格的文本）

...以及attr可能会获得find属性值。

Answer 3

如何在生成表时将所有相关数据添加为a.booboo的属性？

<a class="booboo"
   data-id="3"
   data-name="Foobar"
   data-url="/some/path/abc.html">Just do it</a>

然后你可以检索这样的数据：

$('a.booboo').click(function() {
  var user = $(this).data()
  alert(user.id)
})

我认为这是一个更好的解决方案，因为它不依赖于HTML代码的确切结构，而且比其他提出的解决方案更清晰。

Answer 4

如果修复了html结构，可以使用：

$(".booboo").click(function(){
  var tr = this.parentNode.parentNode.parentNode.parentNode;
  var foobar = tr.cells[0].innerHTML;
  var url = tr.cells[2].firstChild.href;
  var id = this.parentNode.previousSibling.firstChild.href.match(/\d+$/)[0];
  // ...
});

Answer 5

$(".booboo").click(function() {

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

  var readItUrl = a.closest("li").prev().find("a").attr("href");
  var tdText = tr.find("td:first").text();
  var tr.find("td:eq(1) > a").attr("href");

});

jQuery：如何导航表行以提取单元格数据

5 个答案: