jquery - 单击按钮时如何获取与类最接近的值？

Question

我有带有数据和按钮的表格行；每个按钮对应于每一行，当您单击一个按钮时，我想获得<td>与类最接近的值。

我使用下面的代码来获取值，但它总是显示一个空值，我想知道如何编辑我的记录。

表结构：

<table id="myTable" class="table table-striped">
     <thead>
         <tr>
             <th>Student ID</th>
             <th>Student Name</th>
             <th>Email</th>
             <th>Department</th>
             <th>Action(Edit)</th>
             <th>Action(Delete)</th>
         </tr>
     </thead>
     <tbody id="SetStudentList">
         <tr id="LoadingStatus" style="color:red"></tr>
     </tbody>
</table>

<script>
  var SetData;
  $(document).ready(function () {

     var StudentList = [
         {
             "StudentId": 1,
             "StudentName": "ram",
             "Email": "[e-mail]",
             "isDeleted": "yes",
             "Dept": "dept"
         },
         {
             "StudentId": 2,
             "StudentName": "sam",
             "Email": "[e-mail]",
             "isDeleted": "no",
             "Dept": "business"
         },
         {
             "StudentId": 3,
             "StudentName": "ramadevi",
             "Email": "[e-mail]",
             "isDeleted": "yes",
             "Dept": "mba"
         },
         {
             "StudentId": 4,
             "StudentName": "pooja",
             "Email": "[e-mail]",
             "isDeleted": "no",
             "Dept": "inter"
         }
     ]

     $("#LoadingStatus").html("Loading....");
     SetData = $("#SetStudentList");
     for (var i = 0; i < StudentList.length; i++) {
       var Data = "<tr class='row_" + StudentList[i].StudentId + "'>" +
         "<td class='minAmt'>" + StudentList[i].StudentId + "</td>" +
         "<td class='minAmt'>" + StudentList[i].StudentName + "</td>" +
         "<td class='minAmt'>" + StudentList[i].Email + "</td>" +
         "<td class='minAmt'>" + StudentList[i].Dept + "</td>" +
         "<td class='minAmt'>" + "<a href='#' class='btn btn-warning' onclick='EditStudentRecord(" + StudentList[i].StudentId + ")' ><span class='glyphicon glyphicon-edit'></span></a>" + "</td>" +
         "<td class='minAmt'>" + "<a href='#' class='btn btn-danger' onclick='DeleteStudentRecord(" + StudentList[i].StudentId + ")'><span class='glyphicon glyphicon-trash'></span></a>" + "</td>" +
         "</tr>";
       SetData.append(Data);
       $("#LoadingStatus").html("");
     }
  });



  //Show The Popup Modal For Edit Student Record
  function EditStudentRecord(StudentId) {
      console.log("====>" + $(this).closest('tr').find('.minAmt').text());
  }

</script>

标签： jquery

Answer 1

我认为问题是：

• $(this)函数内部无法捕获所需的元素
• 您.minAmt在该行中有更多具有此类的元素..因此您可以使用:eq()它们中的哪一个来选择

---

//Show The Popup Modal For Edit Student Record
function EditStudentRecord(StudentId , el) {
                                 ------^^-----
     console.log("====>" + $(el).closest('tr').find('.minAmt:eq(0)').text());
                        -----^^-----                     ----^^^^^----
}

和

onclick='EditStudentRecord(" + StudentList[i].StudentId + " , this)' 

^{注意：如果上面的代码对您有用..那么您还需要对DELETE函数进行相同的更改}

var StudentList = [
    {
        "StudentId": 1,
        "StudentName": "ram",
        "Email": "[e-mail]",
        "isDeleted": "yes",
        "Dept": "dept"
    },
    {
        "StudentId": 2,
        "StudentName": "sam",
        "Email": "[e-mail]",
        "isDeleted": "no",
        "Dept": "business"
    },
    {
        "StudentId": 3,
        "StudentName": "ramadevi",
        "Email": "[e-mail]",
        "isDeleted": "yes",
        "Dept": "mba"
    },
    {
        "StudentId": 4,
        "StudentName": "pooja",
        "Email": "[e-mail]",
        "isDeleted": "no",
        "Dept": "inter"
    }
]

var SetData = $('#SetStudentList');  // this is a table selector
$("#LoadingStatus").html(""); // empty the loading status
// loop through the List using `.each()`jquery function
$.each(StudentList , function(key , value){
  var Data = "<tr class='row_" + value.StudentId + "'>" +
  "<td class='minAmt'>" + value.StudentId + "</td>" +
  "<td class='minAmt'>" + value.StudentName + "</td>" +
  "<td class='minAmt'>" + value.Email + "</td>" +
  "<td class='minAmt'>" + value.Dept + "</td>" +
  "<td class='minAmt control'>" + "<a href='#' class='btn btn-warning EditStudent'><span class='glyphicon glyphicon-edit'></span></a></td>" +
  "<td class='minAmt control'>" + "<a href='#' class='btn btn-danger DeleteStudent'><span class='glyphicon glyphicon-trash'></span></a></td>" +
  "</tr>";
  SetData.append(Data); // append the data to the table
});
// I removed the `onclick` attribute we will use here the `click` jusery function
// I added EditStudent class to the edit span icon
$(document).on('click' , '.EditStudent' , function(){
  var $this = $(this);
  // get closest tr and loop through all tds .. and replace the html of the td with the input
  // if you wonder what is `:not(.control)` this is because if we change the tds content that will affect the edit td and the delete td so to avoid this I set the class `control` to the `td`s which holds the edit and delete icons 
  $this.closest('tr').find('td:not(.control)').each(function(){
    var getText = $(this).text(); // get the td text
    $(this).html('<input type="text" value="'+getText+'"/>');  // replace the td html with input with the same text value
  });
});

// delete click
$(document).on('click' , '.DeleteStudent' , function(){
  // remove the closest row
  $(this).closest('tr').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<table id="myTable" class="table table-striped">
    <thead>
        <tr>
            <th>Student ID</th>
            <th>Student Name</th>
            <th>Email</th>
            <th>Department</th>
            <th>Action(Edit)</th>
            <th>Action(Delete)</th>
        </tr>
    </thead>
    <tbody id="SetStudentList">
        <tr id="LoadingStatus" style="color:red"></tr>
    </tbody>
</table>