Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не срабатывает клик на таблице (JS) / 4 сообщений из 4, страница 1 из 1
10.06.2019, 08:14
    #39824756
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает клик на таблице (JS)
Элемент таблицы создается в html

Код: html
1.
<table id="game_grid"></table>



но содержимое генерится яваскриптом:

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
    <script>
        var gameGrid = document.getElementById("game_grid");
        var gameGridInnerHTML;
       
        gameGridInnerHTML = '<tbody>';
        for (i = 0; i < 100; i++){
            gameGridInnerHTML = gameGridInnerHTML + '<tr>';
            for(j = 0; j < 100;j++){
                gameGridInnerHTML = gameGridInnerHTML +  '<td class="grid_element" id="cell_'+j+i+'"></td>';
            }
            gameGridInnerHTML = gameGridInnerHTML + '</tr>';
        }
        gameGridInnerHTML = gameGridInnerHTML + '</tbody>';
        gameGrid.innerHTML = gameGridInnerHTML;

         
         gameGrid.onclick = function(event){
            var field_cell = event.target;
            field_cell = field_cell.closest('td');
            alert(field_cell.id);
        }
        
     </script>



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

Генерится таблица нормально, но при клике на нее ничего не происходит. Что не так?
...
Рейтинг: 0 / 0
10.06.2019, 08:28
    #39824759
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает клик на таблице (JS)
Добавлю. Такое ощущение, что браузер не считает, что мышь находится над таблицей.

css ячейки выглядит так:
Код: css
1.
2.
3.
4.
5.
6.
.grid_element{
    display:inline-block;
    cursor: pointer;
    width: 40px;
    height: 40px;
}



но курсор при наведении на таблицу на пойнтер не меняется
...
Рейтинг: 0 / 0
10.06.2019, 09:06
    #39824769
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает клик на таблице (JS)
...
Рейтинг: 0 / 0
10.06.2019, 09:21
    #39824778
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не срабатывает клик на таблице (JS)
Спасибо за подсказку. Выяснилось что проблема в z-index:

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
#game_grid{
    position:absolute;
    height: 4400px;
    width:4440px;
    border: 1px;
    border-style: solid;
/*    z-index: -100;*/
    border-color:green;
    empty-cells:show;
    border-spacing:0;
}



отрицательный стоял, т.к. предполагается что все элементы страницы будут располагаться поверх таблицы. Так и непонятно правда чем он перекрылся, т.к. перестает реагировать даже если убрать со страницы вообще все, кроме этой таблицы.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не срабатывает клик на таблице (JS) / 4 сообщений из 4, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]