Как получить значение ячейки таблицы js

Получить значение ячейки таблицы в javascript с внешним скриптом

У меня есть простая таблица, заполненная строками из базы данных MySQL, часть HTML выглядит так:

Он выполняет свою работу, и у меня хороший стол. Теперь я хочу, чтобы, если я нажимаю на строку, я получаю пять переменных со значениями ячеек.

Проблема, которая остановила меня, – это получить элемент <td> . Это то, что я пытался в внешнем файле javascript:

Консоль ответила так: Uncaught TypeError: undefined is not a function .

Затем я попробовал console.log(rows[i].getElementById(vonalkod)); , но он ответил Uncaught TypeError: Cannot read property ‘getElementById’ of undefined

Если я только пишу console.log(this); то он печатает то, что я ожидаю, всю строку в html.

Итак, мой вопрос в том, что синтаксис для получения этих ячеек по ID?

Что вы можете сделать, чтобы получить содержимое ячейки,

Теперь, сказав это, он будет работать только в том случае, если у вас есть один col1 : если у вас есть более одного из этих <tr> каждого будет пять td таких как <td >, то же самое для остальных id-s, Этот недопустимый HTML. Рассмотрите возможность замены этих id-ов классами или дополнительным PHP.

Или, еще лучше, вы можете полностью отказаться от всего этого неуклюжего id и использовать что-то вроде:

Здесь очень удобна библиотека jQuery. Ваш скрипт, написанный с помощью jQuery, так же просто, как и

Как получить значение ячейки td таблицы html с помощью JavaScript?

У меня есть таблица HTML, созданная с динамическими данными, и я не могу предсказать количество строк в ней. Что я хочу сделать, так это получить значение ячейки при нажатии строки. Я знаю, как использовать td onclick, но не знаю, как получить доступ к значению ячейки в функции Javascript.

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

Как получить значение ячейки, если я не знаю индекс строки и индекс столбца таблицы, по которой я щелкнул?

5 ответы

Не используйте встроенный JavaScript, отделите свое поведение от данных, и с ним станет намного проще работать. Я бы предложил следующее:

Пересмотренный подход, в ответ на комментарий (ниже):

Вам не хватает точки с запятой. Кроме того, не делайте функции внутри цикла.

Эта ревизия связывает (единственную) именованную функцию как click обработчик событий множества <td> элементов и позволяет избежать ненужных накладных расходов на создание нескольких анонимных функций в цикле (что является плохой практикой из-за повторения и влияния на производительность из-за использования памяти):

ответ дан 23 мая ’17, 12:05

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

@localhost: вы абсолютно правы, я отредактировал, чтобы исправить пропущенную точку с запятой, и предложил альтернативное решение, в котором используется именованная функция, а не несколько анонимных функций, созданных циклом. Спасибо за комментарий! — Дэвид Томас

Это мое решение

ответ дан 13 апр.

getElementsByTagName () иногда примерно в 70 (!) раз быстрее, чем querySelectorAll () jsperf.com/getelementsbytagname-vs-queryselectorall-несколько 😉 — ХоупНик

Вы можете использовать:

С прохождением это вы можете получить доступ к объекту DOM через параметры вашей функции.

ответ дан 07 апр.

В то время, когда существует jQuery и множество других библиотек, поощряющих простой JavaScript, встроенные функции — не самый лучший метод. — Бакудан

Во встроенных обработчиках нет ничего плохого. Не все придерживаются религии «ненавязчивого JavaScript». — user1106925

Я дал таблице идентификатор, чтобы я мог ее найти. При загрузке (когда страница загружается браузером) я устанавливаю обработчики событий onclick для всех строк таблицы. Эти обработчики предупреждают содержимое первой ячейки.

ответ дан 07 апр.

Я написал HTML-таблицу на JSP. «Курс» это тип. Например, Course cs, cs = объект типа Course, который имеет 2 атрибута: id, title. курсы — это список объектов курса.

Таблица HTML отображает названия всех курсов в каждой ячейке. Таким образом, в таблице только 1 столбец: Курс1 Курс2 Курс3 . В сторону:

Это означает, что после того, как пользователь выберет ячейку таблицы, например «Курс2», заголовок курса — «Курс2» переместится на страницу, где URL-адрес направляет пользователя: http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp . «Course2» появится на странице FoundS.jsp. Идентификатор «Course2» — courseId. Чтобы объявить переменную courseId, в которой будет храниться CourseX, вы должны поставить знак «?» после URL и рядом с ним идентификатор. Оно работает.

Создан 25 июля ’12, 15:07

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками javascript html-table cell or задайте свой вопрос.

Получить конкретное значение ячейки из таблицы HTML, используя JavaScript

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

Как получить значения ячеек таблицы HTML?

ОТВЕТЫ

Ответ 1

Чтобы получить текст из этой ячейки

Вы можете использовать это —

Ответ 2

Ответ 3

Вы также можете использовать способ DOM для получения значения ячейки: <сильные > Ячейки [0].firstChild.datastrong >

Ответ 4

Вы можете получить значение ячейки с помощью JS даже при нажатии на ячейку:

Я написал таблицу HTML в JSP. Курс — это тип. Например, курс cs, cs = объект типа Course, который имеет 2 атрибута: id, title. Курсы — объект ArrayList курса.

В таблице HTML отображаются все названия курсов в каждой ячейке. Таким образом, таблица имеет только 1 столбец: 1 курс Course2 Course3 . Отвлекаясь:

Это означает, что после того, как пользователь выберет ячейку таблицы, например «Course2» , заголовок курса «Курс2» переместится на страницу, где URL-адрес направляет пользователя: http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp . «Course2» поступит на страницу FoundS.jsp. Идентификатор «Course2» — это курс. Чтобы объявить переменную courseId, в которой будет сохраняться CourseX, вы помещаете «?» после URL и рядом с ним идентификатор.

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

Пример работает. Я видел.

Ответ 5

Ответ 6

Просто.. # иногда, когда большая таблица не может добавить идентификатор к каждому tr

Ответ 7

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

Как получить значение HTML td ячейки таблицы с помощью JavaScript?

У меня есть таблица HTML, созданная с динамическими данными, и не могу предсказать количество строк в ней. То, что я хочу сделать, — это получить значение ячейки при щелчке по строке. Я знаю, использовать td onclick, но я не знаю, как получить доступ к значению ячейки в функции Javascript.

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

Как получить значение ячейки, если я не знаю индекс строки и индекс столбца, который я нажал?

5 ответов

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

Пересмотренный подход в ответ на комментарий (ниже):

Вам не хватает точки с запятой. Кроме того, не выполняйте функции внутри цикла.

Эта ревизия связывает (одну) именованную функцию как обработчик событий click из нескольких элементов <td> и позволяет избежать ненужных накладных расходов при создании нескольких анонимных функций в цикле (что является плохой практикой из-за повторения и влияние на производительность, из-за использования памяти):

Array.prototype.forEach() .
document.getElementById() .
document.getElementsByTagName() .
document.querySelectorAll() .
EventTarget.addEventListener() .
Function.prototype.call() .