Get the value of a hidden element in a table (JS)

Question

I have a table in my view

Here is the code

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

I need to get <td style="display:none" class="id"> @Html.DisplayFor(modelItem => item.Id) </td>

For him, I have a function that should get a value from an element of class id

Here is the function code

 $(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();
        }
    });
}

But when I try to get the value in alert, I get nothing.

Where is my problem?

Answer 1

This is my sample code:

$(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>

Run codeHide result

So, for your case, you can get your data using:

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

Run codeHide result