Как получить доступ к <td> указанного столбца

@masli · Регистрация: 27.03.2013

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

доступ к ячейке будет осуществляться по щелчку
Когда ячейка будет формироваться, она должна получить идентификатор.
Ближайшая точка - это тег <th> в котором я могу назначить атрибут class='' и задать его значение.
Тогда все ячейки этого столбца должны быть доступны по этому классу.
Как это организовать ?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
    <table class="tableList">
        <thead>
            <tr>
                <th>ID</th>
                <th class="emailCell">Email</th>
                <th class="cellPasswordNonEdit>Пароль</th>
                <th class="txt">Заработная плата</th>
                <th>телефон</th>
                <th class="txt">дата</th>
                <th>login</th>
            </tr>
        </thead>
        <tbody class="tableBody">
            <tr>
                <td > 1 </td>
                <td  > corn@mail.com </td>
                <td "> $2a$10$jkecRXMcuU </td>
                <td> 330000 </td>
                <td > 237-3460-346436 </td>
                <td > 21-01-2019 </td>
                <td > a.anna </td>
            </tr>
            <tr>
                <td > 2 </td>
                <td > cds333orn@mail.com </td>
                <td > $2a$33rrrrrrrrrrrrrrrrrrrere5454544rrrrrrr10$jkecRXMcuU </td>
                <td > 3345450000 </td>
                <td >237-23333-346436 </td>
                <td > 01-01-2019 </td>
                <td> a.nina </td>
            </tr>
        </tbody>
    </table>

Я нем могу назначить ячйкам <td> свой класс, так как неизвестно какого типа будут данные.
Данные поступают В JSON -формате и затем разбираются в функции

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*разбор json-объекта, содержащего данные 
* из таблицы
* data - объект, содержащие данные из таблицы
* selectorTableList - селектор тега <table>  */
function searchDataFromTable (data, selectorTableList) {
    $.each(data, function (index, row) {
        addRow(row, selectorTableList);
        $(".tableList").floatThead('reflow');
    });
}
 
 
/*рисование одной строки в таблице*/
function addRow(row, selectorTableList) {
 
    var listFromRow ='';
    
    /*Получаем данные из json-объект, полученные от клиента.
  Перебор всех имен полей объекта (имен ключей свойств в JSON),
  по имнеи обращаемся к значению свойства;
   имена ключей свойств JSON, имеет соответсвующие назавания
   в POJO-классе на стороне клиента
   */
    $.each(row, function (key, value){
        listFromRow += '<td>' + value + '</td>';
    });
 
    /*Полученные ячейки одной строки, добавляем в теги, обозначющие
    * строку в таблице*/
    var employeeRow = '<tr>' + listFromRow + '</tr>';
 
    /*Получаем точку узла, где находится таблица, а затем получаем
    * доступ к последнему ряду тела таблицы*/
    var employeeList = $(selectorTableList).find("tbody:last");
 
    /*добавляем строку в указанное место*/
    employeeList.append(employeeRow);
}

Но шапка таблицы у меня зафиксирована в html, там я могу назначить в тегах <th> нужный класс.
Как создать селектор для доступа к ячейке определенного столбца

JavaScript
1
  $("какой-то селектор определенного заголовка" + td )

вот так выглядит html, данные для таблицы в этом документа, генерируются скриптом

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<br />
<div class="tableEmployees">
    <table class="tableList">
        <thead>
        <tr>
            <th>ID</th>
            <th>Email</th>
            <th>Пароль</th>
            <th>Заработная плата</th>
            <th>роль</th>
            <th>ID маркера</th>
            <th>Статус</th>
        </tr>
        </thead>
        <tbody class="tableBody">
        </tbody>
    </table>

Добавлено через 9 минут
может не совсем понятно.

данные могут быть таких типов:

1. дата
2. обычный текст
3. пароль
4. телефон

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

Добавлено через 2 часа 34 минуты
вот пример создания таблицы,

https://thimbleprojects.org/alex-r/623790

а можно ли во время создания таблицы ( во время генерации ячеек), ячейкам соответствующего столбца, назначать такой же "класс" как и тега <th> для текущего столбца обрабатываемой ячейки ?

@Grey · 22.01.2019, 22:06

с помощью .each() можно выбрать по какой ячейке кликнули.

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

Когда ячейка будет формироваться,

добавь ей соответствующий класс, как в th.
при необходимости оба способа можно совместить.

@masli · 23.01.2019, 13:03 **[ТС]**

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

добавь ей соответствующий класс, как в th.

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

@Grey · 23.01.2019, 13:13

можно массив создать на 7 значений. записать в него классы.
когда ячейки формируешь по очереди из массива брать.

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

JavaScript
1
2
3
$.each(row, function (key, value){
        listFromRow += '<td>' + value + '</td>';
    });

key чему равна в каждой ячейке?

@masli · 23.01.2019, 14:03 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 this.dblclick(function (e) {
 
            contextCellEditCurrent = $(this);
 
            getThByTdForTable(contextCellEditCurrent);
 
            /*Получение значение редактируемой ячейки
            trim() - удаляеет крайние пробелы*/
            valueForInput = $(this).text().trim();
            
            /*Здесь помещаются разные вещи*/
            addBblockPage();/*Блокировка основной страницы*/
            addPopupBox();/*задание html-разметки модального окна*/
            addStyles();/*Добавление стилей на новые элементы*/
 
            /*.fadeIn() позволяет плавно изменить прозрачность 
            для отдельных элементов (из скрытого состояния в видимое).*/
            $('.' + selectorForModalBox).fadeIn(); /*плавное появляение модального окна, в указанном месте*/
 
             dragModalBox(); /*перетаскивание модального окна мышью*/
        });

Этот код получает ссылку на контекст текущей ячейки.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
        function getThByTdForTable() {
 
            console.clear(); /*очистка консоли, перед каждым новым редактированием ячейки*/
 
            var indexCurrentCellIntoRow = $(this).index(); /*индекс текущей ячейки в строке*/
 
            var th = 0;
            var thСolSpan = 0;
 
           var parentTheElem = $(this).offsetParent;
            var theadThisTable = parentTheElem.tHead; /*Свойство tHead хранит ссылку на tHead таблицы. */
 
            var indexRowTheThead = theadThisTable.rows[0];
 
            /*Свойство cells хранит коллекцию ячеек TD/TH строки TR. */
            var listCells = indexRowTheThead.cells;
 
            var lengthThead = listCells.length; /*длина коллекции ячеек <th> заголовка*/
 
            /*перебираем коллекцию ячеек заголовка текущей таблицы, 
            ячейка которой редактируется*/
            for (var i = 0; i < lengthThead; i++) {
 
                /* получаем индекс ячейки заголовка в текущей итерации, из коллекции ячеек, текущего заголовка*/
                th = indexRowTheThead.cells[i];
 
                thСolSpan = thСolSpan + th.colSpan;
 
                if (thСolSpan >= (indexCurrentCellIntoRow + this.colSpan)) {
                    break;
                }
            }
            console.log(" Класс для текущего заголовка:");
            console.log(" class=" + $(th).prop('class'));
            return th;
        }

Этот код получает данные о столбце для текущей ячейки, но это сработает только тогда когда я данный код вызову так

JavaScript
1
$(".tableList").on('click', 'td', getThByTdForTable());

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

А можно ли просто по ячейке получить эти данные ? Если да то как ?

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

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

key чему равна в каждой ячейке?

Так вот же :

JavaScript
1
2
3
4
5
6
7
8
9
var results = [
      { id: "1", email: "hajfl@mail.com", password: "37842675678wq6wue*(*&&)(*", salary: "100000", data: '10-05-2018', tel: "15-25-42", login: 'v.ronald' },
      { id: "2", email: "244tDtar@ya.com", password: "fjkhsaldjhflH********", salary: "50000", data: '10-07-2018', tel: "15-35-42", login: 'a.soh' },
      { id: "3", email: "ghhyy77@go.com", password: "jasdhlhfjsdhh******", salary: "150000", data: '18-07-2018', tel: "15-15-42", login: 'i.arny' },
      { id: "4", email: "hajfl@mail.com", password: "37842675678wq6wue*(*&&)(*", salary: "100000", data: '10-05-2018', tel: "15-25-42", login: 'v.ronald' },
      { id: "5", email: "244tDtar@ya.com", password: "fjkhsaldjhflH********", salary: "50000", data: '10-07-2018', tel: "15-35-42", login: 'a.soh' },
      { id: "6", email: "ghhyy77@go.com", password: "jasdhlhfjsdhh******", salary: "150000", data: '18-07-2018', tel: "15-15-42", login: 'i.arny' }
 
    ];

Это макет json который получаю от сервера.

key - это имя поля в объекте, value - значение для данного объекта.

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

Имя класса характеризует данные по общему признаку:

- не редактирумые
- email
- password ...

@Grey · 23.01.2019, 16:17

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

key - это имя поля в объекте

как то так пробовать

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var arr = {
id : '',
email : 'emailCell',
password : 'cellPasswordNonEdit',
salary : 'txt',
data : 'txt',
tel : '',
login : ''
};
$.each(row, function (key, value){
        listFromRow += '<td class="'+arr[key]+'">' + value + '</td>';
    });

@masli · 23.01.2019, 17:02 **[ТС]**

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

Я пока нашел такое решение.

Указываю своему плагину точку с которой нужно будет работать:

JavaScript
1
2
3
4
5
$(document).ready(function () {
    createTable();
    $('.tableList td').modalBoxCellEdit({
...
});

Так делаю таблицу:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table class="tableList">
        <thead class="thead">
            <tr >
                <th class="nonEditCell">ID</th>
                <th class="emailCell">Email</th>
                <th class="passwordCell">Пароль</th>
                <th class="txtCell">Заработная плата</th>
                <th class="telCell">телефон</th>
                <th class="dateCell">дата</th>
                <th class="txtCell">login</th>
            </tr>
        </thead>
        <tbody class="tableBody">
        </tbody>
    </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
24
25
26
27
     this.dblclick(function (e) {
         
            contextCellEditCurrent = $(this);
            var thisElement = this; /*получение ссылки в документе на контекст текущей редактируемой ячейки*/
 
            var indexCurrentCellIntoRow = $(this).index(); /*индекс текущей ячейки в строке*/
          
            var th = getThByTdForTable(indexCurrentCellIntoRow, thisElement); /*Получение данных о столбце текущей ячейки*/
 
            classCurrentCell = $(th).prop('class');
           
            /*Получение значение редактируемой ячейки
            trim() - удаляеет крайние пробелы*/
            valueForInput = $(this).text().trim();
 
            /*Здесь помещаются разные вещи*/
            addBblockPage();/*Блокировка основной страницы*/
            addPopupBox();/*задание html-разметки модального окна*/
            addStyles();/*Добавление стилей на новые элементы*/
 
            /*.fadeIn() позволяет плавно изменить прозрачность 
            для отдельных элементов (из скрытого состояния в видимое).*/
            $('.' + selectorForModalBox).fadeIn(); /*плавное появляение модального окна, в указанном месте*/
 
            dragModalBox(); /*перетаскивание модального окна мышью*/
 
        });

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
     /*indexCurrentCellIntoRow - индекс редактриуемой ячейки в строке;
        thisElement - контекст из точки в документе, где редактируется текущая ячейка*/
        function getThByTdForTable(indexCurrentCellIntoRow, thisElement) {
 
            console.clear(); /*очистка консоли, перед каждым новым редактированием ячейки*/
 
            var th = 0;
            var thСolSpan = 0;
 
            var parentTheElem = thisElement.offsetParent;
            var theadThisTable = parentTheElem.tHead; /*Свойство tHead хранит ссылку на tHead таблицы. */
 
            var indexRowTheThead = theadThisTable.rows[0];
 
            /*Свойство cells хранит коллекцию ячеек TD/TH строки TR. */
            var listCells = indexRowTheThead.cells;
 
            var lengthThead = listCells.length; /*длина коллекции ячеек <th> заголовка*/
 
            /*перебираем коллекцию ячеек заголовка текущей таблицы, 
            ячейка которой редактируется*/
            for (var i = 0; i < lengthThead; i++) {
 
                /* получаем индекс ячейки заголовка в текущей итерации, из коллекции ячеек, текущего заголовка*/
                th = indexRowTheThead.cells[i];
 
                thСolSpan = thСolSpan + th.colSpan;
 
                if (thСolSpan >= (indexCurrentCellIntoRow + thisElement.colSpan)) {
                    break;
                }
            }
            console.log(th);
            console.log("атрибут class : " + $(th).prop('class'));
            return th;
        }

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

JavaScript
1
2
3
 var th = getThByTdForTable(indexCurrentCellIntoRow, thisElement); /*Получение данных о столбце текущей ячейки*/
 
            classCurrentCell = $(th).prop('class');

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .