<table cellspacing="2" border="1" cellpadding="5">
  <tr>
    <td>0</td>
    <td>Рик Санчез</td>
    <td>email@ihatejerry.com</td>
    <td><button>ban</button></td>
  </tr>  
  <tr>
    <td>1</td>
    <td>Гарри Поттер</td>
    <td>severus@snape.com</td>
    <td><button>ban</button></td>
  </tr> 
  <tr>
    <td>2</td>
    <td>Халк</td>
    <td>widowlove@rambler.ru</td>
    <td><button>ban</button></td>
  </tr>
</table>  
<div id="result">
  <span><strong>e-mail: </strong></span>
  <span id="result-email"></span>
</div>
table {
  background: green;
  
}
table td {
  color: #fff;
  border: 1px solid #333;
}
#result {
  margin-top: 20px;
  padding: 5px;
  background: #eee;
  width: 250px;
  height: 30px;
  color: #333;
  display: flex;
  align-items: center;
}
#result-email {
  margin-left: 10px;
}
$("button:contains('ban')").click(function() {
  $('#result-email').text($(this).parent().prev().text());
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js