單擊一行中的按鈕時，如何在表格列中獲取具有相同類的特定行文本

當我單擊同一行中的保留按鈕時，我想獲取同一行的日期。我嘗試在 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 StackOverFlow 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>
<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>

這是一張圖片，可以清楚地說明我的問題。

圖片：

問題圖片

請幫我修復它。提前致謝！

uj5u.com熱心網友回復：

問題是因為closest()只查看目標的父元素。在您的 HTML 中，.statsdate是父級的兄弟級的子級。因此，做你需要做的最簡單的方法是使用closest()來獲取公共父級tr，然后find()獲取.statsdate.

另請注意，選擇器中的類 is statsdate, not .statsDate- case 很重要。

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 StackOverFlow 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>

標籤：html jQuery 阿贾克斯

上一篇：如何在ajaxjquery中通過資料序列化獲取checkox的多值？

下一篇：為什么我從Ajax呼叫將JSON物件作為ASP.NETCore中的資料傳遞給控制器??中的空物件？