Управление элементами динамически создаваемой таблицы
Кнопка onclick добавляет строку таблицы с тремя ячейками. В первой ячейке есть текстовое поле, в которое вы вводите URL-адрес изображения, вторая ячейка содержит кнопку. При нажатии кнопки отображается изображение, на которое ссылается URL-адрес, в третьей ячейке. Сделать это для одной строки просто, но я не могу заставить его работать для последующих строк, потому что идентификатор каждого элемента останется прежним. Мне нужны советы и идеи.
Пример кода:
<script>
var u = 1;
function addRows() {
var table = document.getElementById("t1");
var row = table.insertRow(u);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input id = "ur" type = "url" >';
cell2.innerHTML = '<button onclick = "document.getElementById(\'im1\').src = document.getElementById(\'ur\').value;">Add Image</button>';
cell3.innerHTML = '<img id = "im1" src = "" alt = "image">';
u++;
}
</script>
Каждая строка генерируется нормально, и если вы введете URL-адрес или имя локального файла изображения, он будет правильно отображаться в третьей ячейке. Но это работает только с первой сгенерированной строкой.
Показывать код как текст, а не как изображение.
Вы можете передать параметр в функцию addRows() - параметр будет текущим идентификатором. Внутри функции вы можете взять этот параметр (текущий идентификатор) и добавить случайное значение, чтобы каждый раз вы получали новый уникальный идентификатор.
Не следует использовать id для более чем одного элемента на странице. Также вы можете использовать динамически генерируемые id, если вам это нужно, и получить значение из текста.
Дублирование кода JS в каждой строке — не лучший способ для начала. Если бы я был вами (помимо основной проблемы), я бы создал прослушиватель Один для всех добавленных кнопок вместо добавления события onclick для каждой из них.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
С такими вещами вы не должны вызывать и дублировать идентификаторы, а вместо этого полагаться на свойства Sibling. Тем не менее, быстрый взлом состоял бы в том, чтобы использовать вашу переменную приращения, чтобы присвоить элементам уникальные идентификаторы.
var u = 1;
function addRows(){
var table = document.getElementById("t1");
var row = table.insertRow(u);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input id = "ur'+u'" type = "url" >' ;
cell2.innerHTML = '<button onclick = "document.getElementById(\'im'+u'\').src = document.getElementById(\'ur'+u+'\').value;">Add Image</button>' ;
cell3.innerHTML = '<img id = "im'+u+'" src = "" alt = "image">' ;
u++;
}
</script>
Это должно работать:
function addRow() {
var table = document.getElementById("tab");
var row = document.createElement("tr");
var buttonTd = document.createElement("td");
var button = document.createElement("button");
button.type = "button";
button.innerHTML = "Show image";
buttonTd.appendChild(button);
var textboxTd = document.createElement("td");
var textbox = document.createElement("input");
textbox.type = "text";
textboxTd.appendChild(textbox);
var imageTd = document.createElement("td");
var image = document.createElement("img");
imageTd.appendChild(image);
row.appendChild(textboxTd);
row.appendChild(buttonTd);
row.appendChild(imageTd);
button.addEventListener("mousedown", function () {
image.src = textbox.value;
});
table.appendChild(row);
}table,tr,td {
border: 1px solid black;
border-collapse: collapse;
}<button onclick = "addRow()">Add Row</button>
<table id = "tab"></table>
Вам нужно показать код того, что вы сделали!