Javascript. Клики по ячейкам таблицы - JavaScript, Ajax

Bayern_M · 21.08.2015, 13:58

Здравствуйте!
Уже какой день пытаюсь освоить события мыши. Есть заполненная таблица. В ней необходимо менять данные. То есть жмакнуть на ячейку мышкой и чтобы она из текста превратилась в поле ввода. Ввести туда данные, жмакнуть Enter и данные сохранились в таблице. Нашел пример на jquery. Теперь пытаюсь разобраться и сделать это все подручными средствами.

Для начала хочу просто привязать событие к клику по ячейке моей таблицы, но у меня ничего не выходит.

Вот код

Код:

<script type="javascript">
            function onTDClick(){
                alert("Кликс!");
            }
            var table = document.getElementById('my_table');
            for (i=0; i < _table.rows.length; i++) {
                for (j=0; j < table.rows(i).cells.length; j++) {
                    table.rows(i).cells(j).onclick = onTDClick;
                }
            }
        </script>

Ничего не происходит.

Пытался сделать еще проще. Присваивал конкретной ячейке id, искал ее с помощью getElementById и к событию onclick привязывал alert с сообщением. Реакции опять же никакой. Ощущение, что ячейка не знает, что по ней кликают.

Дошел до совсем примитива - кнопку запилил простую

Код:

<input type="button" onclick="alert('Кликс!');">

Кнопка работает, так почему ячейки нет?
Сорри за многобукв. Помогите, пожалуйста

arcmag · 21.08.2015, 14:31

Ну вот так попробуйте, щас написал вроде бы работает...

Код HTML:

<!DOCTYPE html>
<html>
<head>
<title>vv</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.addEventListener("load", function(){
	document.getElementById("mTab").addEventListener("click", function(e){
		var elem = e.target || e.srcElement, field = document.createElement("textarea");
		field.value = elem.innerHTML;
		elem.innerHTML = "";
		elem.appendChild(field);
		field.focus();
		field.addEventListener("blur",function(){
			elem.innerHTML = this.value;
			this.parentNode.removeChild(this);	
		});
	});
});
</script>
<style>
*{padding:0px; margin:0px; box-sizing:border-box;}
#mTab{
	border:solid 1px #666666;
	border-collapse:collapse;
}
#mTab td{
	border:solid 1px #666666;
	width:60px;
	height:60px;
	max-height:60px;
	text-align:center;
	overflow:hidden;
}
#mTab td textarea{
	display:block;
	outline:0px;
	border:0px;
	width:100%;
	height:100%;
}
</style>
</head>
<body>
<div id="result">
</div>
<table id="mTab">
	<tr>
    	<td>1</td><td>2</td><td>3</td>
    </tr>
	<tr>
    	<td>1</td><td>2</td><td>3</td>
    </tr>
	<tr>
    	<td>1</td><td>2</td><td>3</td>
    </tr>
</table>
</body>
</html>

_____
Не забывайте форматировать код!
Код программы нужно выделять (форматировать) тегами [CODE] (читать FAQ)
Модератор

Bayern_M · 21.08.2015, 14:49

Цитата:

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

Ну вот так попробуйте, щас написал вроде бы работает...

<!DOCTYPE html>
<html>
<head>
<title>vv</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.addEventListener("load", function(){
document.getElementById("mTab").add EventListener("click", function(e){
var elem = e.target || e.srcElement, field = document.createElement("textarea");
field.value = elem.innerHTML;
elem.innerHTML = "";
elem.appendChild(field);
field.focus();
field.addEventListener("blur",funct ion(){
elem.innerHTML = this.value;
this.parentNode.removeChild(this);
});
});
});
</script>
<style>
*{padding:0px; margin:0px; box-sizing:border-box;}
#mTab{
border:solid 1px #666666;
border-collapse:collapse;
}
#mTab td{
border:solid 1px #666666;
width:60px;
height:60px;
max-height:60px;
text-align:center;
overflow:hidden;
}
#mTab td textarea{
display:block;
outline:0px;
border:0px;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="result">
</div>
<table id="mTab">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</body>
</html>

Спасибо, что уделили время. Но я бы хотел услышать замечания в своем коде, чем опять разбираться в чужом

Изучу ваш пример, хоть он работает и неидеально далеко.

ПС. Обрамляйте код тегом (значёк решетки на панели)

arcmag · 21.08.2015, 14:52

А что в моем примере вам не нравится?

Bayern_M · 21.08.2015, 14:56

Цитата:

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

А что в моем примере вам не нравится?

Попробуйте кликнуть не внутрь, а на границу ячейки

arcmag · 21.08.2015, 14:59

Ок щас гляну.
Попробуйте сейчас проверить...

Код:

<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.addEventListener("load", function(){
	document.getElementById("mTab").addEventListener("click", function(e){
		var elem = e.target || e.srcElement, field = document.createElement("textarea");
if(elem.nodeName != "TD") return;
		field.value = elem.innerHTML;
		elem.innerHTML = "";
		elem.appendChild(field);
		field.focus();
		field.addEventListener("blur",function(){
			elem.innerHTML = this.value;
			this.parentNode.removeChild(this);	
		});
	});
});
</script>
<style>
*{padding:0px; margin:0px; box-sizing:border-box;}
#mTab{
	border:solid 1px #666666;
	border-collapse:collapse;
}
#mTab td{
	border:solid 1px #666666;
	width:60px;
	height:60px;
	max-height:60px;
	text-align:center;
	overflow:hidden;
}
#mTab td textarea{
	display:block;
	outline:0px;
	border:0px;
	width:100%;
	height:100%;
}
</style>
<script>
</script>
</head>
<body>
<table id="mTab">
	<tr>
    	<td>1</td><td>2</td><td>3</td>
    </tr>
	<tr>
    	<td>1</td><td>2</td><td>3</td>
    </tr>
	<tr>
    	<td>1</td><td>2</td><td>3</td>
    </tr>
</table>
</body>
</html>

Bayern_M · 21.08.2015, 15:13

Да, проблема исчезла. Я вижу, что у Вас знания больше моих, так не могли бы Вы глянуть мой кусок кода в начале темы и сказать, что там не хватает. Нет "слушателя" события или что?

Сам стремлюсь вот к такому результату. Если интересно, можете протестить. Только это jquery, надо будет подключить библиотеку

Код:

        <script>
            $(function()    {
                $('td').click(function(e)   {
        
                    var t = e.target || e.srcElement;
     
                    var elm_name = t.tagName.toLowerCase();
        
                    if(elm_name == 'input') {return false;}
                    var val = $(this).html();
                    var code = '<input type="text" id="edit" value="'+val+'" />';
                    $(this).empty().append(code);
                    $('#edit').focus();
                    $('#edit').blur(function()  {
                        var val = $(this).val();
                        $(this).parent().empty().html(val);
                    });
                });
            });
        </script>

arcmag · 21.08.2015, 15:26

PHP код:


			
function onTDClick(){
    alert("Кликс!");
}
var table = document.getElementById('my_table');// ошибка - элементы на странице можно получить только после завершения собтия загрузки страницы
for (i=0; i < _table.rows.length; i++) {// ошибка - _table нету такой переменной
    for (j=0; j < table.rows(i).cells.length; j++) {// ошибка - table.rows(i) -  круглые скобки создают ошибку надо так писать table.rows[i]
        table.rows(i).cells(j).onclick = onTDClick; // ошибка - опять круглые скобки () а нужны []
    }
}

так будет работать

PHP код:


			
function onTDClick(){
    alert("Кликс!");
}
window.addEventListener("load", function(){
    var table = document.getElementById('mTab');
    for (i=0; i < table.rows.length; i++) {
        for (j=0; j < table.rows[i].cells.length; j++) {
            table.rows[i].cells[j].onclick = onTDClick;
        }
    }
});

SQLPowerUser · 21.08.2015, 15:29

На всякий случай (проще, наверное нельзя)

З.Ы. arcmag меня уже опередил...

Код HTML:

<!DOCTYPE html>
<html>
<head>
<title>Редактировать данные в таблице</title>
<style>
table {border-collapse:collapse;}
td,th {
  border:1px solid #ccc;
  padding:0;
}
td p {
  margin:0;
  padding:2px 4px;
}
td p:focus {outline:1px solid #4D90FE;}
</style>
</head>
<body onload="setSelect('example')">
<br><br><br>
<table id="example">
  <tr> <th>idx</th> <th>Дата</th> <th>Тема письма</th> </tr>
  <tr> <td>10</td> <td>01.07.2013</td> <td>Автоматическое оповещение об изменении статуса заявки</td> </tr>
  <tr> <td>20</td> <td>02.07.2013</td> <td>Строка 2</td> </tr>
  <tr> <td>30</td> <td>03.07.2013</td> <td>Автоматическое оповещение об изменении чего-то там</td> </tr>
  <tr> <td>40</td> <td>04.07.2013</td> <td>Строка 4</td> </tr>
  <tr> <td>50</td> <td>05.07.2013</td> <td>Еще тема письма</td> </tr>
</table>

<script>
function setSelect(idx) {
  var tbl = document.getElementById(idx);
  for (i=1; i<tbl.rows.length; i++) {
    var row = tbl.rows[i];
    for (j=0; j<row.cells.length; j++) {
      var td = row.cells[i,j];
      td.innerHTML = '<p tabindex="-1" contenteditable="true">' + td.innerHTML + '</p>';
    }
  }
}
</script>

</body>
</html>

Bayern_M · 21.08.2015, 15:46

Спасибо, ребята! От души!

ЗНачит вся ошибка была в том, что я не дожидался полной загрузки страницы и пытался получить доступ к ячейкам. Ну теперь буду разбираться с редактированием!

Еще раз спасибо!

21.08.2015, 13:58	#1
Bayern_M Форумчанин Регистрация: 18.03.2015 Сообщений: 114	Javascript. Клики по ячейкам таблицы Здравствуйте! Уже какой день пытаюсь освоить события мыши. Есть заполненная таблица. В ней необходимо менять данные. То есть жмакнуть на ячейку мышкой и чтобы она из текста превратилась в поле ввода. Ввести туда данные, жмакнуть Enter и данные сохранились в таблице. Нашел пример на jquery. Теперь пытаюсь разобраться и сделать это все подручными средствами. Для начала хочу просто привязать событие к клику по ячейке моей таблицы, но у меня ничего не выходит. Вот код Код: `<script type="javascript"> function onTDClick(){ alert("Кликс!"); } var table = document.getElementById('my_table'); for (i=0; i < _table.rows.length; i++) { for (j=0; j < table.rows(i).cells.length; j++) { table.rows(i).cells(j).onclick = onTDClick; } } </script>` Ничего не происходит. Пытался сделать еще проще. Присваивал конкретной ячейке id, искал ее с помощью getElementById и к событию onclick привязывал alert с сообщением. Реакции опять же никакой. Ощущение, что ячейка не знает, что по ней кликают. Дошел до совсем примитива - кнопку запилил простую Код: `<input type="button" onclick="alert('Кликс!');">` Кнопка работает, так почему ячейки нет? Сорри за многобукв. Помогите, пожалуйста

21.08.2015, 15:13	#7
Bayern_M Форумчанин Регистрация: 18.03.2015 Сообщений: 114	Да, проблема исчезла. Я вижу, что у Вас знания больше моих, так не могли бы Вы глянуть мой кусок кода в начале темы и сказать, что там не хватает. Нет "слушателя" события или что? Сам стремлюсь вот к такому результату. Если интересно, можете протестить. Только это jquery, надо будет подключить библиотеку Код: `<script> $(function() { $('td').click(function(e) { var t = e.target \|\| e.srcElement; var elm_name = t.tagName.toLowerCase(); if(elm_name == 'input') {return false;} var val = $(this).html(); var code = '<input type="text" id="edit" value="'+val+'" />'; $(this).empty().append(code); $('#edit').focus(); $('#edit').blur(function() { var val = $(this).val(); $(this).parent().empty().html(val); }); }); }); </script>`

21.08.2015, 15:26	#8
arcmag Регистрация: 20.08.2015 Сообщений: 5	PHP код: function onTDClick(){ alert("Кликс!"); } var table = document.getElementById('my_table');// ошибка - элементы на странице можно получить только после завершения собтия загрузки страницы for (i=0; i < _table.rows.length; i++) {// ошибка - _table нету такой переменной for (j=0; j < table.rows(i).cells.length; j++) {// ошибка - table.rows(i) - круглые скобки создают ошибку надо так писать table.rows[i] table.rows(i).cells(j).onclick = onTDClick; // ошибка - опять круглые скобки () а нужны [] } } так будет работать PHP код: `function onTDClick(){ alert("Кликс!"); } window.addEventListener("load", function(){ var table = document.getElementById('mTab'); for (i=0; i < table.rows.length; i++) { for (j=0; j < table.rows[i].cells.length; j++) { table.rows[i].cells[j].onclick = onTDClick; } } });`

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
[Javascript] Выделение строки и столбца относящихся к ячейке таблицы	irt	JavaScript, Ajax	5	22.12.2015 22:59
Клики мышью C#	Sergey_gorobets	Помощь студентам	3	15.02.2014 22:07
javascript и таблицы html	Веди	JavaScript, Ajax	4	07.04.2013 21:13
Доступ к ячейкам запроса/таблицы.	Kliron	Microsoft Office Access	1	23.03.2010 19:17

21.08.2015, 14:52	#4
arcmag Регистрация: 20.08.2015 Сообщений: 5	А что в моем примере вам не нравится?

21.08.2015, 15:46	#10
Bayern_M Форумчанин Регистрация: 18.03.2015 Сообщений: 114	Спасибо, ребята! От души! ЗНачит вся ошибка была в том, что я не дожидался полной загрузки страницы и пытался получить доступ к ячейкам. Ну теперь буду разбираться с редактированием! Еще раз спасибо!