Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Получить строка/столбец "кликнутой" ячейки Гугл-таблицы (https://javascript.ru/forum/events/80418-poluchit-stroka-stolbec-kliknutojj-yachejjki-gugl-tablicy.html)

Андрей_Ко 02.06.2020 13:39

Получить строка/столбец "кликнутой" ячейки Гугл-таблицы
 
Скрипты только постигаю... работал исключительно в VBA...
Пытаюсь наваять "нечто" в Гугл-Таблице. Вопрос - в заголовке темы.
Стырил на каком-то сайте код:
document.querySelector('Prestige').onclick = (event) => {
  let cell = event.target;
  if (cell.tagName.toLowerCase() != 'td')
    return;
  let i = cell.parentNode.rowIndex;
  let j = cell.cellIndex;
 
  console.log(i, j);
}
};

В таблице вставил его в редактор скриптов... и ничего, хоть обкликайся:cray:
А ,если запустить скрипт прямо в редакторе, то он пишет что "документ не определён и указывает на первую строку.
'Prestige' - имя Таблицы

laimas 02.06.2020 13:42

https://learn.javascript.ru/onload-ondomcontentloaded

Андрей_Ко 02.06.2020 15:02

Прочёл ссылку... ешё раз прочёл... интуитивно догадываюсь, что чего-то не дописал? Понять бы только - что?
Если файл(Таблица) открыт на экране, то разве он уже не загружен и событие DOMContentLoaded не произошло? Зачем его специально обрабатывать? (Логика работы в VBA меня всё время сбивает.:-E )

laimas 02.06.2020 15:17

Цитата:

Сообщение от Андрей_Ко
пишет что "документ не определён и указывает на первую строку

То есть, вы обработчик document.querySelector('Prestige').onclick определяете тогда, когда документ еще не загружен и не готов DOM. Поэтому вы и получаете это сообщение об ошибке, так как нет еще элемента 'Prestige', который вы пытаетесь получить. Обработчик нужно устанавливать когда документ загружен и DOM готов, то есть в обработчике события загрузки документа. По ссылке о нем и рассказывается (DOMContentLoaded) и дается код такого обработчика.

PS. Кстати, querySelector(), это получение ссылки на объект по селектору, которым может быть значения: имя тега, атрибута id, или имя класса. То есть в вашем случае, если Prestige, это id, то

document.querySelector('#Prestige')

если имя класса, то

document.querySelector('.Prestige')

а у вас не понять что. Если ваш скрипт размещен, например, в конце страницы, то DOMContentLoaded и не обязателен, и причиной ошибки может быть как раз проблема с некорректным селектором (при этом об этом в ошибке будет сказано). Не заметил я сразу этот ляп, проверьте, что у вас и исправьте.

Андрей_Ко 02.06.2020 17:01

Я пока не понимаю - где размещён мой скрипт? Есть Гугл-таблица, у неё есть Редактор скриптов, вот в нём и лежит скрипт. Интуичу, что все эти td,tr и т.п. мне не нужны, ведь сама страница(собственно таблица) уже сформирована?
Пробую переделать код.
Вариант 1:
function myFunc() {
  function ready(){
  document.querySelector('Prestige').onclick = (event) => {
  let cell = event.target;
  if (cell.tagName.toLowerCase() != 'td')
    return;
  let i = cell.parentNode.rowIndex;
  let j = cell.cellIndex;

    console.log(i, j);
}}};

Ошибка при запуске в Редакторе пропала, но и работать не стало.
Вариант 2:
function myFunc() {
  document.addEventListener("DOMContentLoaded", () => {
  document.querySelector('Prestige').onclick = (event) => {
  let cell = event.target;
  if (cell.tagName.toLowerCase() != 'td')
    return;
  let i = cell.parentNode.rowIndex;
  let j = cell.cellIndex;

    console.log(i, j);
}})};

И опять возникает "документ не определён" во второй строке
Prestige - имя таблицы, пробовал и '#Prestige', и '.Prestige' в Варианте 1 - без толку.

laimas 02.06.2020 17:13

Цитата:

Сообщение от Андрей_Ко
Prestige - имя таблицы

Что значит имя?

Андрей_Ко 02.06.2020 17:19

Google Таблицы, по умолчанию создаётся Новая таблица, я её и переименовал:blink:
ради интереса в строке document.querySelector('Prestige').onclick... менял значение в скобках на любое... а ничего не происходит! В смысле - ошибки не возникает!

laimas 02.06.2020 17:21

<table id="as"> будет найдена по селектору querySelector("#as") - по идентификатору
<table class="as"> будет найдена по селектору querySelector(".as") - по имени класса
<table> будет найдена по селектору querySelector("table") - по имени тега
А querySelector("as") ничего не найдет.

laimas 02.06.2020 17:25

Цитата:

Сообщение от Андрей_Ко
умолчанию создаётся Новая таблица, я её и переименовал

Нет у таблицы атрибута name, в котором можно указать "Новая таблица", хотя пользовательские атрибуты не запрещены. Если Гугл возвращает объект, которому задается "Новая таблица" как, например, ее заголовок, то и бог с ним. Используйте сам объект, которому и назначайте обработчик, querySelector() в этом случае не нужен.

Андрей_Ко 02.06.2020 17:30

:blink: если нет атрибута Name, то где тогда хранится моё название?

Андрей_Ко 02.06.2020 17:33

убрал строку querySelector() ...ничего не поменялось

laimas 02.06.2020 17:39

Цитата:

Сообщение от Андрей_Ко
где тогда хранится моё название?

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

Вкратце, например, если Prestige, это имя переменной которая ссылается на объект (созданную таблицу), то добавить свой обработчик события, это Prestige.addEventListener("событие", ....

Что такое "Новая таблица" бог и Гугл знает, а мне как-то не охота "освежать" мануал ее. :) У кого свежи "воспоминания" о ней подскажет, если сами не найдете в документации нужного.

PS. Строго говоря и о чем надо было сказать, гугл таблица это в общем то не есть тег table, это несколько сложнее, так что в любом случае без API работать с ней не получится.

Андрей_Ко 02.06.2020 20:53

Нашёл ID таблицы, опять пробую:
function myFunc() {
  function ready() {
  document.querySelector("#1I5PlV06KIWF00Xe83Lmvu-nPa-4-0UzKn5DDdWQIGxM").onclick = (event) => {
  let cell = event.target;
  if (cell.tagName.toLowerCase() != 'td')
    return;
  let i = cell.parentNode.rowIndex;
  let j = cell.cellIndex;

    console.log(i, j);
  }}};

Пусто!!!
Пробую хотя-бы так:
function myFunc1() {
  function ready() {
  "#1I5PlV06KIWF00Xe83Lmvu-nPa-4-0UzKn5DDdWQIGxM".onclick = function() {
    alert('Спасибо');
  };
 }
}

Ни-че-го!
Что любопытно: натыкал в обеих процедурах точек останова, в редакторе нигде не останавливаются!

рони 02.06.2020 21:09

Андрей_Ко,
document.addEventListener("DOMContentLoaded", () => {
  document.querySelector('table').addEventListener("click", (event) => {
  let cell = event.target;
  if (cell.tagName.toLowerCase() != 'td')
    return;
  let i = cell.parentNode.rowIndex;
  let j = cell.cellIndex;

    console.log(i, j);
});
});

laimas 02.06.2020 22:13

рони, а разве в ней таблица используется или я не о той гугл таблице думаю?

рони 02.06.2020 22:17

laimas,
без понятия.

laimas 02.06.2020 22:27

Цитата:

Сообщение от рони
без понятия

О таблице или моих тараканах? :)

рони 02.06.2020 22:46

laimas,
не знаю гугл таблицы совсем.

Андрей_Ко 02.06.2020 23:50

рони, простите, а у Вас этот листинг работает? Или это - просто набросок? Там в двух последних строках какая-то нескладуха со скобками
Вроде, так должно быть с закрывающими скобками:
document.addEventListener("DOMContentLoaded", () => {
document.querySelector('table').addEventListener("click", (event) => {
let cell = event.target;
if (cell.tagName.toLowerCase() != 'td')
return;
let i = cell.parentNode.rowIndex;
let j = cell.cellIndex;
console.log(i, j);
}})

но теперь он ругается на первую строку:"Unexpected identifier"

рони 02.06.2020 23:55

Цитата:

Сообщение от Андрей_Ко
а у Вас этот листинг работает?

жмите по Cell
как там устроено у вас, я не знаю.

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

    </style>

  <script>
document.addEventListener("DOMContentLoaded", () => {
  document.querySelector('table').addEventListener("click", (event) => {
  let cell = event.target;
  if (cell.tagName.toLowerCase() != 'td')
    return;
  let i = cell.parentNode.rowIndex;
  let j = cell.cellIndex;

    alert([i, j]);
});
});

  </script>

</head>
<body>
 <table width="400" summary="" >
 	<thead>
 		<tr>
 			<th>Title 1</th>
 			<th>Title 2</th>
 			<th>Title 3</th>
 		</tr>
 	</thead>
 	<tbody>
 		<tr>
 			<td>Cell 1.1</td>
 			<td>Cell 1.2</td>
 			<td>Cell 1.3</td>
 		</tr>
 		<tr>
 			<td>Cell 2.1</td>
 			<td>Cell 2.2</td>
 			<td>Cell 2.3</td>
 		</tr>
 	</tbody>
 </table>
</body>
</html>

Андрей_Ко 03.06.2020 00:15

Стоп! Начнём с того, что вы таблицу(объект 'table') html-кодами создаёте, а у меня это объект - Гугл-таблица. А насчёт:
Цитата:

Сообщение от рони
как там устроено у вас, я не знаю.

Ничего личного, но напоминает диалог:
- Помогите с ремонтом мотоцикла...
- Не знаю, как у мотоцикла, но вот в самосвале...

рони 03.06.2020 00:57

Андрей_Ко,
вам куда-то сюда рыть ... https://developers.google.com/chart/interactive/docs/events там есть живой пример с кликом по таблице и выводом номеров строки и ячейки

Андрей_Ко 03.06.2020 12:27

ни черта там не понял! там что-то про диаграммы, вроде... да ещё Хром-зараза! начинает переводить на русский и сам код!

рони 03.06.2020 15:34

Андрей_Ко,
там таблица
Name Manager
1 Mary
2 John Mary
3 Steve Mary
4 Ellen Steve
5 Robert Steve

кликните по имени или цифре

Андрей_Ко 05.06.2020 10:47

рони,
ни черта у меня не выходит:nono: :пробую самый первый пример на той странице выполнить
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
google.visualization.events.addListener(table, 'select', selectHandler);
function selectHandler(e) {
  alert('A table row was selected');
}

... и на первой же строке - ошибка: "google is not defined"
=============================================
может изначально мы не туда роем? я же имею ввиду НЕ "таблицы созданные в Google", а Google Sheets один из инструментов Google Docs, внешне похожий на лист Excel !

рони 05.06.2020 10:57

Андрей_Ко,
не могу помочь, ждите тех, кто работал с таблицами, или ищите форум со специалистами.

Андрей_Ко 05.06.2020 14:58

К сожалению, на форумах по Гугл-таблицам обсуждают только встроенные формулы, увы, а про скрипты и не заикаются.:blink:

laimas 05.06.2020 17:23

https://developers.google.com/apps-s...riggers/events

Это что есть из событий, также можно определить и пользовательские функции. Не понятно только какую таблицу вы все пытаетесь в ней найти, в ней все строится не на table.

Андрей_Ко 05.06.2020 18:24

Цитата:

Сообщение от laimas (Сообщение 525483)
Не понятно только какую таблицу вы все пытаетесь в ней найти...

Я про Google Sheets и работу с ней с помощью скриптов, по типу работы с книгой Excel с помощью VBA, а не встроенных формул, а Вы что подумали?

laimas 05.06.2020 18:36

Я ничего не думаю, у Google Sheets есть API, в его рамках и надо работать. Вот только нет в ней никаких td, по которым вы пытаетесь щелкнуть.

Андрей_Ко 05.06.2020 19:13

А где у меня td? Если только случайно пропустил. Я ищу в инете хоть что-то подходящее и пробую, пока безуспешно.
Вот очередное:
/*
 * Функция getValuesBySheet() получает и возвращает все данные из таблицы
 * по ее id и листа с именем "Лист1".
 *
 * @return {array} sheet_values - Данные в виде двумерного массива
 */
function getValuesByActiveSheet () {
  var spreadsheet_id = "1I5PlV06KIWF00Xe83Lmvu-nPa-4-0UzKn5DDdWQIGxM",
      spreadsheet_link = SpreadsheetApp.openById( spreadsheet_id ),
      sheet_name = "Лист1",
      sheet_link = spreadsheet_link.getSheetByName( sheet_name ),
      sheet_values = sheet_link.getDataRange().getValues();
      Logger.log( sheet_values );
      return sheet_values;
}

При запуске ошибка: Вам не разрешено вызывать пользователя SpreadsheetApp.openById. Необходимые разрешения: https://www.googleapis.com/auth/spreadsheets. (строка 9, файл Копия 1)
Ничего не понимаю...:blink:

laimas 05.06.2020 19:26

Цитата:

Сообщение от Андрей_Ко
if (cell.tagName.toLowerCase() != 'td')

А тут что?

Цитата:

Сообщение от Андрей_Ко
Необходимые разрешения

Значит нет у вас прав, что-вы пропустили, можно спросить Гугл "чтение запись google sheets"

Андрей_Ко 05.06.2020 21:22

Спросил...
Гугл изменил разрешение на использование openById...
Нарыл в инете вариант обхода проблемы с использованием ф-ции getFileById(ID), теперь ошибка исчезла но вываливается окно с требованием дать доступ... и в конце:"Это приложение ещё не проверено в Google. Продолжайте, только если вы доверяете разработчику", но кнопки "Продолжать" там нет...

laimas 06.06.2020 02:37

Это не ко мне вопросы, о чем я помню, это авторизация, получение токена, и только потом возможна работа. Все это через API в РНР.


Часовой пояс GMT +3, время: 03:42.