VPF::взять значение ячейки по клику

VanHelsing

Дата 6.3.2013, 14:35 (ссылка)

(нет голосов)

Загрузка ...

ХОЧУ ВСЕ ЗНАТЬ!!!

Награды: 1

Профиль
Группа: Участник
Сообщений: 288
Регистрация: 3.1.2008
Где: Екатеринбург

Репутация: нет
Всего: 6

Здравствуйте. Есть следующая страница.

Код


<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      
        <script src="jquery-1.7.1.js" type="text/javascript"></script>
        <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
        <table id="info"  cellspacing="10">
            <thead>
                <tr>
                    <th>Id</th>
                    <th width="200">Клиент</th>
                    <th>Тип</th>
                    <th width="350">Обращение</th>
                    <th width="150">Состояние</th>
                    <th width="200">Комментарии</th>
                </tr>
            </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>ООО АЛЬФА1</td>
                        <td>Закрыто</td>
                        <td>Обращение по данной заявке</td>
                        <td>Состояние</td>
                        <td>Это комментарии</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>ООО АЛЬФА</td>
                        <td>Открыто</td>
                        <td>Обращение по данной заявке1111</td>
                        <td>Состояние</td>
                        <td>Это комментарии1111</td>
                    </tr>   
                    <tr>
                        <td>3</td>
                        <td>ООО АЛЬФА2</td>
                        <td>Открыто</td>
                        <td>Обращение по данной заявке222</td>
                        <td>Состояние</td>
                        <td>Это комментарии222</td>
                    </tr>                     
                </tbody>
            </table>
    </body>
</html>

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

Код


$(document).ready(function(){       
   var tables = $('#info');
   //осуществление перебора и добавление новой ячейки в каждую строку
   tables.each(function() {
      var _table = $(this);
          _table 
            .find('thead tr')
            .append($('<th class="edit">&nbsp;</th>'));
            
         _table
            .find('tbody tr')
            .append($('td class="edit"><button class="btn btn-mini" type="button">Взять</button></td></br>'))
            .append($('td class="edit"><button class="btn btn-mini" type="button">Освободить</button></td></br>'))
            .append($('td class="edit"><button class="btn btn-mini" type="button">Закрыть</button></td>'));
        });

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

Код


    $('#info tr button').click(function() {
        var text1 = $(this).html();
        var id = $('td:first-child', this).html();    
    });

Текст с кнопки я получаю, а вот текст из ячейки не получается получить.
Буду признателен за подсказку.

--------------------

Мой блог.
Specialist

Aliance

Дата 6.3.2013, 17:59 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Ну во-первых, как-то странно что ты добавляешь 1 th, но зато сразу 3 td. Либо их должно быть поровну, либо нужно прописать colspan="3" к th.

Задачу твою решить не получается потому, что не правильно пользуешься переменной this при dom traversing:

Код


    $('#info tr button').click(function() {
        // this === button
        var $button = $(this);
        var text1 = $button.text();
        var id = $button.closest('tr').find('td:eq(0)').text();
    });

Имея клик на

Код


<button class="btn btn-mini" type="button">Освободить</button>

мы поднимаемся до его родительского <tr> с помощью команды

Код


$button.closest('tr')

а далее ищем в нем первое вхождение <td> с помощью

Код


.find('td:eq(0)')

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

VanHelsing

Дата 10.3.2013, 14:47 (ссылка)

(нет голосов)

Загрузка ...

ХОЧУ ВСЕ ЗНАТЬ!!!

Награды: 1

Профиль
Группа: Участник
Сообщений: 288
Регистрация: 3.1.2008
Где: Екатеринбург

Репутация: нет
Всего: 6

Большое спасибо за помощь.

Это сообщение отредактировал(а) VanHelsing - 10.3.2013, 14:48

--------------------

Мой блог.
Specialist

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »