单击一行中的按钮时，如何在 table 列中获取具有相同 class 的特定行文本

Question

我想在点击同一行的Hold按钮时得到同一行的日期。我已尝试在 Google 上进行更多搜索，但找不到任何有用的查询来解决此问题。

我是 ajax 的新人，这就是为什么我需要这个社区的帮助。请帮我解决一下。

这是我正在尝试的：

HTML:

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>User ID</th>
            <th>Date</th>
            <th>Name</th>
            <th>User Status</th>
            <th colspan="4" class="text-center">Action</th>
        </tr>
    </thead>
    <tbody id="load-table">
        <!-- dummy data for Whosebug to show you data (By the way this data is dynamic coming from a database. I have placed dummy data only to show the output. So you can ignore data in #load-table)-->
        <tr>
            <td>1</td>
            <td class="statsdate">2022-02-12</td>
            <td>Jhon</td>
            <td>Active</td>
            <td><Button class="hold" data-holdid="holdid">Hold</Button></td>
        </tr>
        <tr>
            <td>4</td>
            <td class="statsdate">2022-02-11</td>
            <td>Michele</td>
            <td>Active</td>
            <td><Button class="hold" data-holdid="holdid">Hold</Button></td>
        </tr>
        <tr>
            <td>10</td>
            <td class="statsdate">2022-02-10</td>
            <td>William</td>
            <td>Active</td>
            <td><Button class="hold" data-holdid="holdid">Hold</Button></td>
        </tr>
    </tbody>
</table>

AJAX:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#load-table").append(
            "<tr>"
            + "<td>" + value.id + "</td>" +
            "<td class='statsdate'>" + statsDate + "</td>" +
            "<td>" + value.full_name + "</td>" +
            "<td><button type='button' title='Approve this user stat' class='approve btn btn-success btn-rounded btn-icon' data-approveid='" + value.id + "'><i class='typcn typcn-thumbs-up'></td>" +
            "<td><button type='button' title='Mark as Hold' class='hold btn btn-danger btn-rounded btn-icon' data-holdid='" + value.id + "'><i class='typcn typcn-archive'></td>" +
            "</tr>"
        );
  });
  
  //Hold user by clicking on hold modal
        $(document).on("click",".hold",function(){
            var answer = window.confirm("Are You sure to mark this user as Hold?");
            if (answer) {
                var holdid = $(this).data("holdid");
                var sts_date = $(this).closest(".statsDate").text();
                var obj = {uID : holdid, date: sts_date};
                var myJSON = JSON.stringify(obj);
                console.log(myJSON);
            }
            else {
                $("#usersCount").html("");
            }
        });
</script>

这是一张图片，可以清楚地说明我的问题。

图片：

Question Image

请帮我修复一下。提前致谢！

Answer 1

问题是因为 closest() 只查看目标的 parent 元素。在您的 HTML 中，.statsdate 是 child 的兄弟 parent。因此，最简单的方法是使用 closest() 获取常见的 parent tr，然后使用 find() 获取 .statsdate.

另请注意 class 是 statsdate，而不是 .statsDate - 大小写在选择器中很重要。

var sts_date = $(this).closest('tr').find(".statsdate").text();

工作示例：

$(document).ready(function() {
  let statsDate = (new Date()).toLocaleDateString();
  let value = {
    id: '123',
    full_name: 'foo bar'
  }

  $("#load-table").append(
    "<tr>" +
    "<td>" + value.id + "</td>" +
    "<td class='statsdate'>" + statsDate + "</td>" +
    "<td>" + value.full_name + "</td>" +
    "<td><button type='button' title='Approve this user stat' class='approve btn btn-success btn-rounded btn-icon' data-approveid='" + value.id + "'><i class='typcn typcn-thumbs-up'></td>" +
    "<td><button type='button' title='Mark as Hold' class='hold btn btn-danger btn-rounded btn-icon' data-holdid='" + value.id + "'><i class='typcn typcn-archive'></td>" +
    "</tr>"
  );
});

//Hold user by clicking on hold modal
$(document).on("click", ".hold", function() {
  var answer = window.confirm("Are You sure to mark this user as Hold?");
  if (answer) {
    var holdid = $(this).data("holdid");
    var sts_date = $(this).closest('tr').find(".statsdate").text();
    var obj = {
      uID: holdid,
      date: sts_date
    };
    var myJSON = JSON.stringify(obj);
    
    console.log(myJSON);
  } else {
    $("#usersCount").html("");
  }
});

<table class="table table-hover table-bordered">
  <thead>
    <tr>
      <th>User ID</th>
      <th>Date</th>
      <th>Name</th>
      <th>User Status</th>
      <th colspan="4" class="text-center">Action</th>
    </tr>
  </thead>
  <tbody id="load-table">
    <!-- dummy data for Whosebug to show you data (By the way this data is dynamic coming from a database. I have placed dummy data only to show the output. So you can ignore data in #load-table)-->
    <tr>
      <td>1</td>
      <td class="statsdate">2022-02-12</td>
      <td>Jhon</td>
      <td>Active</td>
      <td>
        <button class="hold" data-holdid="holdid">Hold</button>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td class="statsdate">2022-02-11</td>
      <td>Michele</td>
      <td>Active</td>
      <td>
        <button class="hold" data-holdid="holdid">Hold</button>
      </td>
    </tr>
    <tr>
      <td>10</td>
      <td class="statsdate">2022-02-10</td>
      <td>William</td>
      <td>Active</td>
      <td>
        <button class="hold" data-holdid="holdid">Hold</button>
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

单击一行中的按钮时，如何在 table 列中获取具有相同 class 的特定行文本

how to get specific row text haviing same class in a table column when clicking on a button in one row

html

ajax

jquery