<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());
});
This Pen doesn't use any external CSS resources.