Уникальный номер ячейки таблицы. Задачка не для всех :)

@Pepeka · Регистрация: 15.01.2014

Студворк — интернет-сервис помощи студентам

Всем привет!

Задача - JQ скрипт должен пройти по произвольной двумерной HTML таблице, назначив каждому TD 2 класса - номер по порядку по горизонтали и номер по порядку по вертикали.

Например, 4-я ячейка в 3-й строке должна получить вид:

HTML5
1
<td class="td4 tr3">

ну или 5-я ячейка в 7-ой строке:

HTML5
1
<td class="td5 tr7">

и это при том, что класс у ячейки уже может быть присвоен, например 5-я ячейка в 7-ой строке выглядела как:

HTML5
1
<td class="costprice">

а должна стать такой:

HTML5
1
<td class="costprice td5 tr7">

Теперь понимаете, какой дурдом? )) Я не могу решить эту задачу... Если кто поможет - огромный респект, ибо очень нужно!

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

@Lazy_Den · 20.10.2015, 20:49

JavaScript
1
2
3
4
5
$('table tr').each(function(i, tr){
    $('td',tr).each(function(k, td){
        $(td).addClass('td' + (k+1) + ' ' + 'tr' + (i+1));        
    });
});

Добавлено через 33 секунды

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

Теперь понимаете, какой дурдом?

Задача нулевого уровня сложности

@Pepeka · 21.10.2015, 01:50 **[ТС]**

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

Задача нулевого уровня сложности

Эммм... Мда, убили наповал... Особенно забавляет надпись "добавлено через 33 секунды", косвенно намекая на время ответа на мой вопрос, хотя не совсем так, конечно )))

Спс, полез тестить!

Добавлено через 4 часа 54 минуты

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

Задача...

Всё работает! ) Спасибо еще раз!

Но у меня буквально 1 вопрос... ещё... 1...

Как теперь при клике на какой-либо из ячеек получить в 2 переменные текстовые значения самого левого (первого) TD, и самого верхнего TD (из первой строки, над этой ячейкой)?

Просто говоря - значения ячеек в первом столбце и и значения ячеек в первой строке таблицы - это названия полей. Надо их получить, конкретные 2 значения, исходя из кликнутой ячейки в недрах таблицы. Доп. условие, если нужно - по ячейкам первого столбца и по ячейкам первой строки пользователь не щёлкает мышью, раз это "технические" строки (названия), а не позиции прайса...

@Lazy_Den · 21.10.2015, 02:55

Pepeka, смотрим пример в песочнице

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var tbl = $('table'),
    output = $('output'),
    col = $('tr:first-child td', tbl),
    line = $('tr td:first-child', tbl);
$('td', tbl).not(col).not(line).on('click', function(){
    var $that = $(this),
        vc = col.eq($that.index()).text(), // значение колонки
        vl = line.eq($that.parent('tr').index()).text(); // значение линии
    
    output.html('X: <b>' + vl + '</b>, Y: <b>' + vc + '</b>');
});

@Pepeka · 21.10.2015, 03:02 **[ТС]**

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

смотрим пример в песочнице

Поиграл в песочнице... прослезился. Спасибо! Вы мне сэкономили дня 3-4... экспериментов с JQ ))

@Fedor Vlasenko · 21.10.2015, 03:36

JavaScript
1
2
3
4
5
6
var output = $('output'), x, y;
$('table').on('click', 'tr:not(:first-child) td:not(:first-child)', function(e){
   y = e.delegateTarget.rows[0].cells[this.cellIndex].innerHTML;
   x = this.parentElement.children[0].innerHTML;
   output.html('X: <b>' + x + '</b>, Y: <b>' + y + '</b>');
});

песочница

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

Уникальный номер ячейки таблицы. Задачка не для всех :)

Решение