Форум

dipfrost · #1 (**permalink**) 10.10.2014, 14:02

Доброго времени суток! у меня возникла такая проблема: у меня есть большое количество строк которые выводятся из БД на страницу циклом по порядку, и мне нужно что бы возле любой из записей нажать на кнопку она скрывается и появляется спрятанное поле(редактирования). То есть 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() на скрытом

skrudjmakdak · #2 (**permalink**) 10.10.2014, 15:06

<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>

ksa · #3 (**permalink**) 10.10.2014, 15:12

Сообщение от dipfrost

у меня будет куча записей с id "fir"

ИД должно быть уникальным на странице...

Arramis · #4 (**permalink**) 10.10.2014, 15:12

http://learn.javascript.ru/event-delegation

Форум

Справочник

Discord чат

Курсы javascript