Question

如果我点击任何一个，我想从行（）返回内容。

<table id="dataTable" class="table table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nome</th>
            <th>Email</th>
            <th>Empresa</th>
            <th>Criado</th>
            <th>Ações</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="id-cliente-14">14</td>
            <td>Name here</td>
            <td>contato@test.com</td>
            <td>sdfsf</td>
            <td>2017-03-13 11:31:58</td>
            <td>
                <a href="" class="actions_icons pencil"><i class="fa fa-pencil" aria-hidden="true"></i></a>                             
                <a href="" class="actions_icons trash"><i class="fa fa-trash" aria-hidden="true"></i></a>
            </td>
        </tr>
    </tbody>
</table>

使用此代码：

    $("i.fa.fa-pencil").on( "click", function() {
        console.log( $(this).parent().parent().parent().text() );
    });

我在控制台上得到了这个结果：

14Name herecontato@test.comsdfsf2017-03-13 11:31:58

我无法解决这个问题，我需要单独获取ID，如果这并不难，那么也可以单独使用其他ID。

我可以将css class或id放在或另一个标签中，如果这可以使它更容易。

Answer 1

你是否尝试过SomeThing？

$("#id-cliente-14").on( "click", function() {
    console.log( "ID: "+ $(this).parents('tr').find('td')[0].innerText);
    console.log( "NAM: "+ $(this).parents('tr').find('td')[1].innerText);
});

- 编辑

我明白了

我认为它有效：

$(".pencil").on( "click", function(e) {
    console.log( "ID: "+ $(this).parents('tr').find('td')[0].innerText);
    console.log( "NAM: "+ $(this).parents('tr').find('td')[1].innerText);
    e.preventDefault();
});

Answer 2

您目前正在选择<tbody>，因为它是父母的父母。如果您想要第一个<td>，您可以选择父母的第一个兄弟或祖父母的第一个孩子，例如：

$("i.fa.fa-pencil").on( "click", function() {
    console.log( $(this).closest("tr").children(":first").text() );
});

Answer 3

＆＃13;

$("i.fa.fa-pencil").on("click", function(e) {
  e.preventDefault();
  console.log("Id of first td "+$(this).closest("tr").find("td:nth-child(1)").attr("id"));
  console.log("Text of first td "+$(this).closest("tr").find("td:nth-child(1)").text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dataTable" class="table table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Email</th>
      <th>Empresa</th>
      <th>Criado</th>
      <th>Ações</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="id-cliente-14">14</td>
      <td>Name here</td>
      <td>contato@test.com</td>
      <td>sdfsf</td>
      <td>2017-03-13 11:31:58</td>
      <td>
        <a href="" class="actions_icons pencil"><i class="fa fa-pencil" aria-hidden="true">pencil</i></a>
        <a href="" class="actions_icons trash"><i class="fa fa-trash" aria-hidden="true">trash</i></a>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

使用.closest()

返回表格行的元素

3 个答案: