html - How to hide and show a table cell text?

Question

How can I put the * in place of text in the password column cells when clicked on it? After clicking again is should show the password.

    <table class="table">
        <tr>
            <th><center>Name</center></th>
            <th><center>Username</center></th>
            <th ><center>Password</center></th>
            <th><center>Mobile Number</center></th>
            <th><center>Email</center></th>
            <th colspan="2"><center>Actions</center></th>
        </tr>
        @foreach (var item in Model.Users)
        {
    <tr>
        <td>@item.Name</td>
        <td>@item.Username</td>
        <td >@item.Password</td>
        <td>@item.Mobile</td>
        <td>@item.Email</td>
        <td><a href="/admin/edit/@item.Id">Edit</a></td>
        <td>@Html.ActionLink("Delete", "Delete",new {id=@item.Id }, new { @class = "modal-link1", @OnClick = "return confirm('Are you sure you to delete this Record?');" })</td>
    </tr>
        }
    </table>

question from:https://stackoverflow.com/questions/66061140/how-to-hide-and-show-a-table-cell-text

Answer 1

You could do something like this:

$('.table tr').each(function() {
  var n = $("td:eq(2)", this);
  var t = n.text();
  n.html(`<div data-pass="${t}">******</div>`)

});

$('div[data-pass]').click(function() {
  $(this).text($(this).text().indexOf('*') > -1 ? $(this).attr('data-pass') : '******')
})

demo

$('.table tr').each(function() {
  var n = $("td:eq(2)", this);
  var t = n.text();
  n.html(`<div data-pass="${t}">******</div>`)

});

$('div[data-pass]').click(function() {
  $(this).text($(this).text().indexOf('*') > -1 ? $(this).attr('data-pass') : '******')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>
        <center>Name</center>
      </th>
      <th>
        <center>Username</center>
      </th>
      <th>
        <center>Password</center>
      </th>
      <th>
        <center>Mobile Number</center>
      </th>
      <th>
        <center>Email</center>
      </th>
      <th colspan="2">
        <center>Actions</center>
      </th>
    </tr>
  </thead>
  <tr>
    <td>@item.Name</td>
    <td>@item.Username</td>
    <td>@item.Password</td>
    <td>@item.Mobile</td>
    <td>@item.Email</td>
    <td><a href="/admin/edit/@item.Id">Edit</a></td>
    <td>@Html.ActionLink("Delete", "Delete",new {id=@item.Id }, new { @class = "modal-link1", @OnClick = "return confirm('Are you sure you to delete this Record?');" })</td>
  </tr>
</table>