javascript - 获取表中隐藏元素的值(JS)

Question

我的 View 中有表格

这是代码

  <tbody id="patients" style="overflow-y: scroll;">
                @foreach (var item in Model)
                {
                    <tr>
                        <td class="point">
                            @(rowNo += 1)
                        </td>
                        <td style="display:none"  class="id">
                            @Html.DisplayFor(modelItem => item.Id)
                        </td>
                        <td class="birthday">
                            @Html.DisplayFor(modelItem => item.Date_of_Birthday)
                        </td>
                        <td  class="name">
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td class="title"></td>
                        <td class="title"></td>
                        <td class="lastedit">@Html.DisplayFor(modelItem => item.Last_edit)</td>
                        <td style="text-align: end;">
                            <img style="width:30px;height:30px;" class="delete_pt" src="~/images/icons8-Delete-50.png" />
                            <img style="width:30px;height:30px;" class="masters_data" src="~/images/icons8-Document-30.png" />
                        </td>
                    </tr>
                }
            </tbody>

我需要得到 <td style="display:none" class="id">
@Html.DisplayFor(modelItem => item.Id)
</td>

为此，我有一个函数需要从 id 类元素中获取值

这里是函数代码

 $(document).on('click', '.delete_pt', function () {
    deleting();
});

function deleting() {
    var title = $(this).parent().find('.id').text();
    alert(title);
    var model = {
    id:pasreInt(id)        };
    $.ajax({
    url: '/PatientDatabase/DeletingPerson',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        type: 'POST',
        dataType: 'json',
        processData: false,
        success: function (data) {
          location.reload();
        }
    });
}

但是当我试图在 alert 中获取值时，我一无所获。

我的问题在哪里？

Answer 1

这是我的示例代码:

$(function() {
  createRows();

  function createRows() {
    let dummyData = ['Fadhly', 'Aira', 'Haura', 'Al-Khwarizmi'];
    
    let tRows = '';
    for (let i = 0; i < dummyData.length; i++) {
      let rowData = {
        Id: 'id' + i,
        No: i+1,
        Name: dummyData[i]
      };
      
      tRows += '<tr>';
      tRows += '<td>' + rowData.No + '</td>';
      tRows += '<td style="display: none;">' + rowData.Id + '</td>';
      tRows += '<td>' + rowData.Name + '</td>';
      tRows += '<td><button class="btn-delete">Delete</button></td>';
      tRows += '</tr>';
    }
    
    $('tbody').html(tRows);
  }
  
  $('button.btn-delete').on('click', function() {
    let container = $(this).closest('tr');
    alert(container.find('td:nth(1)').html())
  });
});

table {
  width: 100%;
}
table, td {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>No</td>
      <td style="display: none;">Id</td>
      <td>Name</td>
      <td>Action</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

因此，对于您的情况，您可以使用以下方式获取数据:

$('.delete_pt').on('click', function() {
  let container = $(this).closest('tr');
  alert(container.find('.id').html())
});