Получить текст из ячейки выделенной строки

@Hikaru · Регистрация: 16.01.2015

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

Есть таблица. По нажатию на строку (RowClick) должен получить значение определенной ячейки в этой строке (LINK).
Подскажите пожалуйста как нужно написать.

JavaScript
1
2
3
4
     function Grid_RowClick(s, e) {
            console.log(e)
            grid.GetRowValues(e.visibleIndex,'LINK')
        }

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

@kalabuni · 14.07.2015, 10:58

а поподробнее можно -- как вы собираетесь "нажать" на строку, чтобы её "выделить", и как, в вашем понимании, строки "выделяются" ?

и что такое LINK для "определённой ячейки" -- это её id или её имя класса, или что-то ещё ?

@Hikaru · 14.07.2015, 12:24 **[ТС]**

У GridView свойство AllowSelectByRowClick="true" так я могу выделять/нажимать на строку в таблице. (Я использую компоненты компании DevExpress для VisualStudio. Там больше возможностей, чем у обычных, стандартных.)
Вот табличка

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
            <dx:ASPxGridView ID="tlJournal" ClientSideEvents-ColumnMoving="false" runat="server" ClientInstanceName="grid" AutoGenerateColumns="False"
                EnableTheming="True" Theme="Office2010Blue" KeyFieldName="NUM;" Width="100%">
                <Columns>
                    <dx:GridViewDataTextColumn Caption="Дата утверждения" Name="tlJournalDATE" VisibleIndex="1" FieldName="DATA_SIGN" Width="128">
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn Caption="Версия" Name="tlJournalDATE" Width="55" VisibleIndex="6" FieldName="REVISION">
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn Caption="Штрих-код" Name="tlJournalDATE" VisibleIndex="9" FieldName="BARCODE" Width="120">
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn Caption="Ссылка" Name="tlJournalDATE" VisibleIndex="9" FieldName="LINK" Width="0">
                    </dx:GridViewDataTextColumn>
                </Columns>
                <Settings ShowFilterRow="true" VerticalScrollBarMode="Visible" VerticalScrollableHeight="0" />
                <SettingsBehavior AllowFocusedRow="false" AllowSelectByRowClick="true" EnableRowHotTrack="true"/>
                <SettingsPager Mode="EndlessPaging" PageSize="40" />
                <ClientSideEvents Init="OnInit" EndCallback="OnEndCallback" RowClick="Grid_RowClick"/>
            </dx:ASPxGridView>

Ну и скриншотик:

Получить текст из ячейки выделенной строки

И раньше я делал так: По нажатию на строку у меня в новом окне открывается ссылка, делал при помощи JS запрос в базу, там я получал значение из столбца LINK(там ссылка).

JavaScript
1
2
3
4
function Grid_RowClick(s, e) {
            console.log(e)
            grid.GetRowValues(e.visibleIndex,'LINK', OnGetRowValues)            
        }

Получал ссылку и открывал её в новой вкладке

JavaScript
1
2
3
function OnGetRowValues(Value) {
            window.open(Value);
        }

Но так очень долго работает. Пока из таблицы отправится запрос на сервер, получит ссылку, потом откроет её в новом окне, загрузит..И решил сделать как показалось проще-теперь я загружаю столбец с ссылками вместе со всеми столбцами в таблицу Grid, только я его скрываю через CSS, чтобы не видно было и хочу через JS получать из этого столбца значение, эту ссылку. Чтобы сразу можно было открывать её в новом окне без всяких запросов.

@Hikaru · 15.07.2015, 14:43 **[ТС]**

Думал как-то так

JavaScript
1
2
3
function Grid_RowClick(Value) {
            grid.GetRowValues(document.getElementsByName('tlJournalLink')[0].values)
        }

Но так не правильно, получаю ошибку "TypeError: document.getElementsByName(...)[0] is undefined"

Добавлено через 5 часов 10 минут
Сказали нужно через JSON, парсить и тогда можно будет брать нужное значение из ячейки. Как это сделать?

Добавлено через 2 часа 13 минут
Может по классу можно сделать поиск? В Firebug-е посмотрел, там отличаются class у столбцов:

HTML5
1
2
3
4
5
<td class="dxgv">10.07.2015 14:48:28</td>
<td class="dxgv">11.03.15.</td>
<td class="dxgv">a.6</td>
<td class="dxgv">*KVM0001218758*</td>
<td class="hidden dxgv">http://index.aspx?id=7189682&stage=0</td>

У нужного мне столбца class="hidden dxgv". Так вот, может по нему можно вытащить из ячейки выделенной строки текст?

@scio me nescire · 15.07.2015, 15:40

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <table>
      <tr>
          <td class="dxgv">10.07.2015 14:48:28</td>
          <td class="dxgv">11.03.15.</td>
          <td class="dxgv">a.6</td>
          <td class="dxgv">*KVM0001218758*</td>
          <td class="hidden dxgv">http://index.aspx?id=7189682&stage=0</td>
      <tr>
  </table>
  
 
  <script>
      var elem = document.querySelector("td[class^='hidden']");
      console.log(elem);
</script>

а что не получается то ?

@Hikaru · 16.07.2015, 07:50 **[ТС]**

scio me nescire, Спасибо. Хоть какое-то продвижение уже) Так берёт всегда из 1-й строки. А как сделать, чтобы выбиралось значение из выделенной строки(на которую нажмут)?

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

JavaScript
1
2
3
4
5
6
7
function Grid_RowClick(s, e) {
            console.log(e)
            grid.GetRowValues(document.querySelector("td[class^='hidden']",OnGetRowValues) 
        }
function OnGetRowValues(Value) {
            window.open(Value);
        }

Но внутри скобок нельзя написать document..Ну-можно, но работать не будет.

@scio me nescire · 16.07.2015, 17:44

Hikaru,

HTML5
1
2
3
4
5
6
7
8
9
<div>
    <table id="tableId" border=1>
      <tbody>
        <tr><td>Item one</td></tr>
        <tr><td>Item two</td></tr>
        <tr><td>Item three</td></tr>
      </tbody>
    </table>
</div>

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
function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;
 
                                        // тут можно проверить наличие класса hidden
                                        var clsNames = cell.className;
 
 
                                        alert("id:" + id + "\n" + clsNames);
                                 };
            };
 
        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();

@Hikaru · 17.07.2015, 07:21 **[ТС]**

scio me nescire, Кажется то, что нужно. Но подчеркивает

JavaScript
1
var rows = table.getElementsByTagName("tr");

Пишет Table is null. Я и id вставлял, и клиентское имя и table. В Вашем примере тоже самое пишет.

@scio me nescire · 17.07.2015, 13:01

Hikaru,
Таблицы в переменной table почему то нету, как ваш html выглядит ?
У меня по клику все работает, можете попробовать getElementsByTagName("td");

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <body>
        
        <div>
            <table id="tableId" border=1>
                <tbody>
                    <td class="dxgv">10.07.2015 14:48:28</td>
                    <td class="dxgv">11.03.15.</td>
                    <td class="dxgv">a.6</td>
                    <td class="dxgv">*KVM0001218758*</td>
                    <td class="hidden dxgv">http://index.aspx?id=7189682&stage=0</td>
                    <td class="hidden dxgv">test new hidden td</td>
                </tbody>
            </table>
        </div>
        <script src="index.js"></script>
    </body>
</html>

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
function addRowHandlers() {
    var td = document.getElementsByTagName("td");
        for (var i = 0; i < td.length; i++) {
 
            var current = td[i];
            console.log(current);
 
            var createClickHandler = 
                function(row) 
                {
                    var clsNames = row.className.split(' ');
 
                    // Проверка на наличие класса hidden
                    if(clsNames.indexOf('hidden') > -1){
 
                    return function() { 
                            var id = row.innerHTML;
 
                            var clsNames = row.className;
 
 
                            console.log("text: " + id + "\n" + 'class list: ' + clsNames);
                     };
                };
                    }
           current.onclick = createClickHandler(current);
        };
 
}
window.onload = addRowHandlers();

@scio me nescire · 17.07.2015, 13:33

Hikaru,
упс, кажется я только сейчас понял, что вам нужно.

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
<html>
    <body>
        
        <div>
            <table id="tableId" border=1>
                <tbody>
                    <tr>
                        <td class="dxgv">10.07.2015 14:48:28</td>
                        <td class="dxgv">11.03.15.</td>
                        <td class="dxgv">a.6</td>
                        <td class="dxgv">*KVM0001218758*</td>
                        <td class="hidden dxgv">http://index.aspx?id=7189682&stage=0</td>
                    </tr>
                    <tr>
                        <td class="dxgv">10.07.2015 14:48:28</td>
                        <td class="dxgv">11.03.15.</td>
                        <td class="dxgv">a.6</td>
                        <td class="dxgv">*KVM0001218758*</td>
                        <td class="hidden dxgv">http://index.aspx?id=7189682&stage=1</td>
                    </tr>
                    <tr>
                        <td class="dxgv">10.07.2015 14:48:28</td>
                        <td class="dxgv">11.03.15.</td>
                        <td class="dxgv">a.6</td>
                        <td class="dxgv">*KVM0001218758*</td>
                        <td class="hidden">http://index.aspx?id=7189682&stage=2</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script src="index.js"></script>
    </body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var elems = document.getElementsByTagName('tr');
for (var i = 0; i < elems.length; i++) {
    elems[i].onclick = function (e) {
        e = e || event;
        var currentTr = e.target.parentNode;
        var hiddenTd = currentTr.getElementsByClassName('hidden')[0];
 
        var hiddenLink = hiddenTd.innerHTML;
        console.log(hiddenLink);
    }
};

@Hikaru · 17.07.2015, 13:50 **[ТС]**

scio me nescire,
Так выглядит код в Visual Studio

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
            <dx:ASPxGridView ID="tlJournal" ClientSideEvents-ColumnMoving="false" runat="server" ClientInstanceName="grid" AutoGenerateColumns="False"
                EnableTheming="True" Theme="Office2010Blue" KeyFieldName="NUM;" Width="100%">
                <Columns>
                    <dx:GridViewDataTextColumn Caption="Дата утверждения" Name="tlJournalDATE" VisibleIndex="1" FieldName="DATA_SIGN" Width="128">
                        <Settings AutoFilterCondition="Contains" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn Caption="Версия" Name="tlJournalDATE" Width="55" VisibleIndex="6" FieldName="REVISION">
                        <Settings AutoFilterCondition="Contains" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn Caption="Штрих-код" Name="tlJournalDATE" VisibleIndex="9" FieldName="BARCODE" Width="120">
                        <Settings AutoFilterCondition="Contains" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn Caption="Ссылка" Name="tlJournalLink" VisibleIndex="9" FieldName="LINK" Width="0">
                        <Settings AutoFilterCondition="Contains" />
                        <HeaderStyle CssClass="hidden" />
                        <CellStyle CssClass="hidden"></CellStyle>
                    </dx:GridViewDataTextColumn>
                </Columns>
                <Settings ShowFilterRow="true" VerticalScrollBarMode="Visible" VerticalScrollableHeight="0" />
                <SettingsBehavior AllowFocusedRow="false" AllowSelectByRowClick="true" EnableRowHotTrack="true" />
                <SettingsPager Mode="EndlessPaging" PageSize="40" />
                <ClientSideEvents Init="OnInit" EndCallback="OnEndCallback" RowClick="Grid_RowClick" />
            </dx:ASPxGridView>

А так на странице web уже

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
<table id="tlJournal" class="dxgvControl_Office2010Blue" cellspacing="0" cellpadding="0" style="width: 1438px; border-collapse: separate;">
    <tbody>
        <tr>
            <td>
                <div class="dxgvHSDC" style="padding-right: 17px;">
                    <div class="dxgvCSD" align="left" style="height: 707.7px; overflow-x: hidden; overflow-y: scroll; width: 1438px;">
                        <table id="tlJournal_DXMainTable" class="dxgvTable_Office2010Blue" cellspacing="0" cellpadding="0" style="width: 100%; border-collapse: collapse; empty-cells: show; table-layout: fixed; overflow: hidden;" onclick="aspxGVTableClick('tlJournal', event);">
                            <tbody>
                                <tr>
                                    <td style="width: 128px;"></td>
                                    <td style="width: 55px;"></td>
                                    <td style="width: 120px;"></td>
                                    <td style="width: 0px;"></td>
                                </tr>
                                <tr id="tlJournal_DXDataRow0" class="dxgvDataRow_Office2010Blue">
                                    <td class="dxgv">17.07.2015 14:28:16</td>
                                    <td class="dxgv">a.0</td>
                                    <td class="dxgv">*KVM0001223842*</td>
                                    <td class="hidden dxgv">http://app05.sztm.local/vedomost/index.aspx?id=7211399&stage=0</td>
                                </tr>
                            </tbody>
                        </table>
                        <div id="tlJournal_DXEPLPC"></div>
                    </div>
                    
            </td>
        </tr>
    </tbody>
</table>

@scio me nescire · 17.07.2015, 14:01

Hikaru,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// id нужной таблицы
var table = document.getElementById('tlJournal_DXMainTable');
var elems = table.getElementsByTagName('tr');
 
for (var i = 0; i < elems.length; i++) {
    elems[i].onclick = function (e) {
        e = e || event;
        var currentTr = e.target.parentNode;
        var hiddenTd = currentTr.getElementsByClassName('hidden')[0];
 
        var hiddenLink = hiddenTd.innerHTML;
        console.log(hiddenLink);
    }
};

@Hikaru · 17.07.2015, 14:23 **[ТС]**

scio me nescire, Огромнейшее спасибо. Всё получилось

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

Получить текст из ячейки выделенной строки

Решение

Решение

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	14.07.2015, 10:58
	а поподробнее можно -- как вы собираетесь "нажать" на строку, чтобы её "выделить", и как, в вашем понимании, строки "выделяются" ? и что такое LINK для "определённой ячейки" -- это её id или её имя класса, или что-то ещё ? 0

@Hikaru 87 / 30 / 19 Регистрация: 16.01.2015 Сообщений: 250
	17.07.2015, 14:23 [ТС]
	scio me nescire, Огромнейшее спасибо. Всё получилось 0