Как сделать мою динамическую таблицу прокручиваемой при щелчке мышью? - PullRequest
Новая
       5

Как сделать мою динамическую таблицу прокручиваемой при щелчке мышью?

0 голосов
/ 21 сентября 2011

У меня есть HTML-таблица: 

<table id="my-table" class="my-table">

        <tr class="head">                                
               <th class="name">Name:</th>
               <th class="age">Age:</th>
        </tr>

        <tr class="row">
               <td class="name">John</td>
               <td class="age">19</td>
        </tr class="row">

    <tr class="row">
               <td class="name">Kate</td>
               <td class="age">16</td>
        </tr>
       ...
       ...

  </table>

Таблица может иметь несколько строк, которые соответствуют области высоты 100px.

Затем я определил событие щелчка мышью, то есть, когда щелчок мышью по столбцу имени каждой строки, после строки, по которой щелкнули, будет добавлено некоторое содержимое: 

function addContent(evt){
   $('.row').after("<tr>"+SOME_CONTENT+"</tr>");
}

$(".name").click(addContent);

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

Мой вопрос , как сделать таблицу прокручиваемой (полосу прокрутки) при щелчке мышью по столбцу «имя»? (Это по умолчанию, не прокручиваемое, только если щелкнуть мышью на «имя», которое вызывает добавление дополнительного содержимого, а затем делает его прокручиваемым), так что область таблицы всегда имеет фиксированную высоту 100 пикселей.

Я пробовал в CSS: 

.my-table{  
 overflow:scroll;
 height: 100px;
 width: 600px;
 overflow:auto;

}

но это не работает ...

Ответы [ 2 ]

0 голосов
/ 21 сентября 2011

table элементы не переполняются, но вы можете использовать оболочку вокруг таблицы и добавить к ней свой CSS:

http://jsfiddle.net/2ezdx/1/

0 голосов
/ 21 сентября 2011

С помощью Jquery вы можете добавить 

$(".my-table").css('overflow','hidden')

и, когда вы хотите, чтобы его можно было прокручивать (с событием javascript) 

$(".my-table").css('overflow','scroll')
...