Не понимаю, почему если кликнуть на автора, то этот автор не подгружается в поле input, которое находится в модальном окне?
Я же указываю author[i], значит должно взяться значение у нужной таблицы.
<style>
table {
border-spacing: 0;
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
.admin-question {
margin-bottom: 20px;
padding: 5px;
}
.popup {
width: 300px;
height: 120px;
padding: 10px;
border: 1px solid;
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f3f3f3;
display: none;
}
</style>
<div class="admin-question">
<table>
<tr>
<td>Автор</td>
<td>Редактировать</td>
</tr>
<tr>
<td>Олег</td>
<td class="author"><a href="">автора</a></td>
</tr>
</table>
</div>
<div class="admin-question">
<table>
<tr>
<td>Автор</td>
<td>Редактировать</td>
</tr>
<tr>
<td>Иван</td>
<td class="author"><a href="">автора</a></td>
</tr>
</table>
</div>
<div class="popup">
<p>Редактирование автора</p>
<form method="POST">
<input class="inner" type="text"><br><br>
<input type="submit" value="Изменить">
<input class="cancel" type="button" value="Отмена">
</form>
</div>
<script>
var popup = document.querySelector('.popup');
var inner = document.querySelector('.inner');
var cancel = document.querySelector('.cancel');
var author = document.querySelectorAll('.author');
for(var i = 0; i < author.length; i++){
author[i].addEventListener('click', function() {
event.preventDefault();
popup.style.display = 'block';
console.log(author[i].previousElementSibling.textContent);
inner.value = author[i].previousElementSibling.textContent;
});
}
cancel.addEventListener('click', function() {
popup.style.display = 'none';
});
</script>
