N кол во таблиц div в цикле нужно скрыть\показать определенный
Доброго времени суток! у меня возникла такая проблема: у меня есть большое количество строк которые выводятся из БД на страницу циклом по порядку, и мне нужно что бы возле любой из записей нажать на кнопку она скрывается и появляется спрятанное поле(редактирования). То есть 1 поле видимо 2 скрыто когда нажал на кнопку поменялись местами. Но суть проблемы в том что я не могу указать конкретное Id элемента т.к если
<div style="display:inline; " id="fir"> ставить так то у меня будет куча записей с id "fir" и я не смогу обратится к конкретному. Помогите пожалуйста решить проблему <div style="display:inline; " id="fir"> <div style="display:none;" id="sec"> <div style="display:inline; " id="fir"> <div style="display:none;" id="sec"> <div style="display:inline; " id="fir"> я пробовал делать так
function cheng(){
document.getElementById('sec').style.display='inline'
document.getElementById('fir').style.display='none';
}
function chengok(){
document.getElementById('sec').style.display='none';
document.getElementById('fir').style.display='inline';
}
ф-ция cheng() на видемом поле Chengok() на скрытом |
<html>
<body>
</body>
<script>
var db = [4, 6, 8, 5, 7];
//create data
var table = document.createElement('table');
var content = [];
db.forEach(function (val) {
content.push('<td>' + val + '</td><td><input type="button" value="Редактировать" class="edit"></td>');
})
table.innerHTML = '<tr>' + content.join('</tr><tr>') + '</tr>';
document.body.appendChild(table);
function insertAfter(elem, refElem) {
var parent = refElem.parentNode;
var next = refElem.nextSibling;
if (next) {
return parent.insertBefore(elem, next);
} else {
return parent.appendChild(elem);
}
}
document.body.onclick = function (e) {
var button = e.target;
switch (button.getAttribute('class')) {
case 'edit':
var tr = document.createElement('tr'),
thsTr = button.parentElement.parentElement;
tr.innerHTML = [
'<td>',
'<input type="text" value="' + thsTr.getElementsByTagName('td')[0].innerHTML + '">',
'</td>',
'<td>',
'<input type="button" value="Сохранить" class="save">',
'</td>'
].join('');
insertAfter(tr, thsTr);
thsTr.style.display = 'none';
break;
case 'save':
var thsTr = button.parentElement.parentElement,
value = thsTr.getElementsByTagName('input')[0].value;
thsTr.previousSibling.getElementsByTagName('td')[0].innerHTML = value;
thsTr.previousSibling.style.display = 'table-row';
thsTr.remove();
break;
}
}
</script>
</html>
|
Цитата:
|
|
| Часовой пояс GMT +3, время: 08:03. |