Уникальное всплывающее окно в таблице
Нуждаюсь в помощи, сам не знаю js и обычно копирую существующий код. У меня есть таблица, которая заполняется из БД, в конце каждой строки есть кнопка для редактирования записи. При нажатии открывается диалоговое окно с уже заполненными данными, проблема только состоит в том, что диалоговое окно открывается только на первой строке. Я знаю что проблема состоит в том, что диалоговое окно открывается по ID кнопки, и из-за того что записи дублируются ID остается тот же, но как говорил ранее js не знаю. Помогите исправить, кому не сложно, буду благодарен.
Код:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - HTML 5.2 new dialog tag</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:200,400,700'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<!-- Simple boîte de dialogue, contenant un formulaire -->
<dialog id="favDialog">
<form method="dialog">
<section>
<input type="text" name="fname" id="fname"><br><br>
<input type="text" name="lname" id="lname"><br><br>
<input type="text" name="age" id="age"><br><br>
</section>
<menu>
<button id="cancel" type="reset">reset</button>
<button id="submit" type="submit">submit</button>
</menu>
</form>
</dialog>
<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>settings</th>
</tr>
<tr>
<td>FN1</td>
<td>LN1</td>
<td>111</td>
<td><a id="updateDetails">edit(нажми на меня)</a></td>
</tr>
<tr>
<td>FN2</td>
<td>LN2</td>
<td>211</td>
<td><a id="updateDetails">edit</a></td>
</tr>
<tr>
<td>FN3</td>
<td>LN3</td>
<td>311</td>
<td><a id="updateDetails">edit</a></td>
</tr>
<tr>
<td>FN4</td>
<td>LN4</td>
<td>411</td>
<td><a id="updateDetails">edit</a></td>
</tr>
<tr>
<td>FN5</td>
<td>LN5</td>
<td>511</td>
<td><a id="updateDetails">edit</a></td>
</tr>
</table>
<!-- partial -->
<script src="./script.js"></script>
<script>
var table = document.getElementById('table');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
//rIndex = this.rowIndex;
document.getElementById("fname").value = this.cells[0].innerHTML;
document.getElementById("lname").value = this.cells[1].innerHTML;
document.getElementById("age").value = this.cells[2].innerHTML;
};
}
</script>
</body>
</html>
https://codepen.io/kolya-geshko/pen/rNWRKEo
Ответы (1 шт):
Автор решения: Aziz Umarov
→ Ссылка
Думаю как-то так, можно сделать.
я подправил
var updateButtons = document.getElementsByClassName('updateDetails');
потому что у вас несколько элементов с идентификатором updateDetails
(function() {
var updateButtons = document.getElementsByClassName('updateDetails');
var cancelButton = document.getElementById('cancel');
var submitButton = document.getElementById('submit');
// Update button opens a modal dialog
[...updateButtons].forEach(updateButton => updateButton.addEventListener('click', function() {
document.getElementById('favDialog').showModal();
}));
// Bouton pour fermer la boîte de dialogue
cancelButton.addEventListener('click', function() {
document.getElementById('favDialog').close();
});
// Bouton pour fermer la boîte de dialogue
submitButton.addEventListener('click', function() {
// тут обновите сами
});
})();* {
font-family: "Montserrat", sans-serif;
}
dialog#favDialog::backdrop {
background: linear-gradient(135deg, rgba(207, 161, 252, 0.6) 0%, rgba(113, 102, 240, 0.6) 100%);
}
menu.card {
margin: 30px auto;
width: 480px;
height: 200px;
box-shadow: 5px 5px 100px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
}
menu.card p {
color: #444;
font-size: 2rem;
font-weight: 700;
}
button {
background: #7367F0;
background: linear-gradient(135deg, #CE9FFC 0%, #7367F0 100%);
padding: 10px 15px;
border-radius: 50px;
box-shadow: 5px 5px 100px rgba(0, 0, 0, 0.1);
border: none;
color: white;
cursor: pointer;
transition: background 500ms ease;
}
button:hover {
background: #CE9FFC;
background: linear-gradient(135deg, #CE9FFC 0%, #CE9FFC 100%);
}
button#cancel {
background: #E3E3E3;
background: linear-gradient(135deg, #E3E3E3 0%, #5D6874 100%);
}
button#cancel:hover {
background: #5D6874;
background: linear-gradient(135deg, #E3E3E3 0%, #E3E3E3 100%);
color: #333;
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - HTML 5.2 new dialog tag</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:200,400,700'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<!-- Simple boîte de dialogue, contenant un formulaire -->
<dialog id="favDialog">
<form method="dialog">
<section>
<input type="text" name="fname" id="fname"><br><br>
<input type="text" name="lname" id="lname"><br><br>
<input type="text" name="age" id="age"><br><br>
</section>
<menu>
<button id="cancel" type="reset">reset</button>
<button id="submit" type="submit">submit</button>
</menu>
</form>
</dialog>
<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>settings</th>
</tr>
<tr>
<td>FN1</td>
<td>LN1</td>
<td>111</td>
<td><a class="updateDetails">edit(нажми на меня)</a></td>
</tr>
<tr>
<td>FN2</td>
<td>LN2</td>
<td>211</td>
<td><a class="updateDetails">edit</a></td>
</tr>
<tr>
<td>FN3</td>
<td>LN3</td>
<td>311</td>
<td><a class="updateDetails">edit</a></td>
</tr>
<tr>
<td>FN4</td>
<td>LN4</td>
<td>411</td>
<td><a class="updateDetails">edit</a></td>
</tr>
<tr>
<td>FN5</td>
<td>LN5</td>
<td>511</td>
<td><a class="updateDetails">edit</a></td>
</tr>
</table>
<!-- partial -->
<script src="./script.js"></script>
<script>
var table = document.getElementById('table');
[...table.rows].forEach((row, index)=>{
if (index > 0) {
row.addEventListener("click", function()
{
document.getElementById("fname").value = this.cells[0].innerHTML;
document.getElementById("lname").value = this.cells[1].innerHTML;
document.getElementById("age").value = this.cells[2].innerHTML;
});
}
});
</script>
</body>
</html>