Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Не обрабатываются события в динамически добавленых строках таблицы

Добрый день!

Мне на странице надо иметь возможность динамически добавить строчки в таблицу (в примере ниже работает нормально), и дать возможность перехода между полями таблицы при помощи стрелок навигации на клавиатуре (работает не вполне правильно). Проблема в том, что навигация при помощи стрелок между полями таблицы работает только в полях таблицы, которые уже имелись на странице в html (см. код таблицы ниже), а в добавленных через JS строчках таблицы навигация между полями таблицы не работает! Хотя строчки добавляются правильно, т.е. внутри самой таблицы (в рамках tbody) и с правильно сформированным идентификатором полей (т.е. prevagebeg4, prevageend4, prevnumerator4 и т.д.). И при нажатии на стрелку "вниз" на третьей строчке таблицы осуществляется переход на добавленную через JS строку - т.е. браузер понимает что добавленная строка существует, и поле в ней имеет соответствующее имя.

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

На странице две JS-функции:
1. Добавление строк в таблицу
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script language="JavaScript">
<!-- ;
 
var counterprev = 3; // сколько рядов в таблице уже есть
function moreFields(){
// добавляет новую строчку в конец таблицы
    counterprev++;
    c = counterprev;
    var newFields = '<tr><td><input type="text" name="prevagebeg" size="3" value="" id="prevagebeg' + c + '"/ class=ftde_agebeg></td> \
<td><input type="text" name="prevageend" size="3" value="" id="prevageend' + c + '"/ class=ftde_ageend></td> \
<td><input type="text" name="prevnumerator" size="5" value="" id="prevnumerator' + c + '"/ class=ftde_numerator></td> \
</tr>';
    $('#prevtable > tbody:last-child').append(newFields);
}
 
// end hide -->
</script>
2. Навигация по полям таблицы при помощи стрелок вперед/назад/вверх/вниз с клавиатуры
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
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$('#prevtable input').keydown(function(e) {
    var td;
    switch (e.keyCode) {
      case 39: // right
        td = $(this).parent('td').next();
        break;
      
      case 37: // left
        td = $(this).parent('td').prev();
        break;
        
      case 40: // down
        var i = $(this).parent().index() + 1;
        td = $(this).closest('tr').next().find('td:nth-child(' + i + ')');
        break;
        
      case 38: // up
        var i = $(this).parent().index() + 1;
        td = $(this).closest('tr').prev().find('td:nth-child(' + i + ')');
        break;
 
      case 13: // enter
        td = $(this).parent('td').next();
        break;
 
    }
    td.find('input').focus();
  });
</script>
Сама таблица выглядит так:
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
<table border=0 cellspadding=0 cellspacing=2 id="prevtable">
<tbody>
<tr>
<td class=ftde_agebeg>Начало</td>
<td class=ftde_ageend>Конец</td>
<td class=ftde_numerator>Показатель</td>
</tr>
<tr>
<td><input type="text" name="prevagebeg1" size="3" value="20" id="prevagebeg1" class=ftde_agebeg/></td>
<td><input type="text" name="prevageend1" size="3" value="40" id="prevageend1" class=ftde_ageend/></td>
<td><input type="text" name="prevnumerator1" size="5" value="523" id="prevnumerator1" class=ftde_numerator/></td>
</tr>
<tr>
<td><input type="text" name="prevagebeg2" size="3" value="41" id="prevagebeg2" class=ftde_agebeg/></td>
<td><input type="text" name="prevageend2" size="3" value="60" id="prevageend2" class=ftde_ageend/></td>
<td><input type="text" name="prevnumerator2" size="5" value="723" id="prevnumerator2" class=ftde_numerator/></td>
</tr>
<tr>
<td><input type="text" name="prevagebeg3" size="3" value="61" id="prevagebeg3" class=ftde_agebeg/></td>
<td><input type="text" name="prevageend3" size="3" value="80" id="prevageend3" class=ftde_ageend/></td>
<td><input type="text" name="prevnumerator3" size="5" value="851" id="prevnumerator3" class=ftde_numerator/></td>
</tr>
</tbody>
</table>
 
<a href="javascript:moreFields();">Добавить ещё один ряд</a><br>
Добавлено через 1 час 2 минуты
Поискал еще, заменил строчку
Javascript
1
$('#prevtable input').keydown(function(e) {
на
Javascript
1
$("body").on('keydown', '#prevtable input', function(e) {
После этого стало работать лучше, но все равно не совсем так как надо.
А именно: при нажатии на стрелки в первых трех строчках таблицы (которые уже были в html) - все переходы вперед/назад/вверх/вниз работают.
Но в добавленных через JS строках работает переход при нажатии стрелок только в первом и втором столбцах таблицы, а в третьем (последнем) столбце переход не работает вниз/вверх. Можно при нажатии на стрелку на клаве только вернуться назад - т.е. на второй столбец той же строчки.
А как сделать чтобы и в последнем столбце добавленных через JS строк была нормальная навигация?
Ответ: boris11235, ну смотрите. Можно при фокусе на инпуте, элементу tr присваивать класс, например: .active-row, таким образом можно узнать текущую строку таблицы.
Javascript
1
2
3
4
$('#prevtable').on('focus', 'input', function() {
  $('.active-row').removeClass('active-row');
  $(this).closest('tr').addClass('active-row');
});
Сделаю ссылочку для клонирования строки:
HTML5
1
<a class="clone-row" href='#'>Clone row</a>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var cloneRow = function() {
  var $tr = $('.active-row');
  if (!$tr) return;
 
  counterprev++;
  var $clone = $tr.clone();
  $clone.removeClass('active-row');
  'prevagebeg prevageend prevnumerator'.split(' ').forEach(function(v) {
    var newId = v + counterprev;
    $clone.find('input[name^="' + v + '"]').prop({
      'id': newId,
      'name': newId
    });
  });
  $clone.insertAfter($tr);
}
 
$('a.clone-row').click(function(e) {
  e.preventDefault();
  cloneRow();
});

Там косяк с именами инпутов, и классами - некоторые слеши попадают в атрибут, но я думаю сами разберетесь.
Вопрос: Как заставить TableSorter выводить первые N строк, а не всю таблицу сразу?

Пример разместил тут

(Тестовый вариант, на названия столбцов таблицы внимания не обращайте)

Для сортировки таблицы и постраничной навигации использую TableSorter.

Блок навигации
<div id="pager" class="pager" style="top: 650px; position: absolute; "> 
	<form> 
		<img src="images/table/first.png" class="first">
		<img src="images/table/prev.png" class="prev">
		<input type="text" class="pagedisplay">
		<img src="images/table/next.png" class="next">
		<img src="images/table/last.png" class="last">
		<select class="pagesize"> 
			<option selected="selected" value="10">10</option>
			<option value="10">10</option> 
			<option value="20">20</option> 
			<option value="30">30</option> 
		</select> 
	</form> 
</div>


Поправил код скрипта jquery.tablesorter.pager.js - дефолтный size 10 поменял на 100000000000. Иначе вызов формы редактирования по двойному клику срабатывает только по первым 10 строкам.
...
this.defaults = {
				size: 100000000000,
				offset: 0,
				page: 0,
				totalRows: 0,
...


И вместо первых 10 строк (<option selected="selected" value="10">10</option>) выходит вся таблица.

Что дописать в скрипте, в коде страницы, чтобы выходили первые 10 (или любое другое заданное количество) строк?
Ответ: Проблему решил. В jquery.tablesorter.pager.js дефолтный size оставляем как был равным 10, но чуть изменяем функцию обработки двойного клика по строке таблицы - вместо bind

$(".rowlink").bind( 'dblclick', function()


прописываем live

<script>
$(function() {
$(".rowlink").live( 'dblclick', function() {

});
</script>
Вопрос: Как отодвинуть фон от границы таблицы

Здравствуйте!

Есть такая панель навигации, сделанная таблицей:



Необходимо, чтобы в этих местах



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

Вот код:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<table border="0" align="center" height="40" background="wood.jpg" style="background-repeat:repeat-x; background-position:center;">
 
<tr>
 
<td width="1%" border="1" 
style="border-top:8px double black;
border-right:none;
border-left:8px double black;
border-bottom:8px double black;">&nbsp
</td>
 
<td width="6%" align="center" border="1" 
style="border-top:8px double black;
border-right:none;
border-left:none;
border-bottom:8px double black;
padding:8px;">
<a class="nav" href="#">Афиша</a></td>
 
<td width="6%" align="center" border="1" 
style="border-top:8px double black;
border-right:none;
border-left:none;
border-bottom:8px double black;
padding:8px;">
<a class="nav" href="#">Новости</a></td>
 
<td width="6%" align="center" border="1" 
style="border-top:8px double black;
border-right:none;
border-left:none;
border-bottom:8px double black;
padding:8px;">
<a class="nav" href="#">Аудио</a></td>
 
<td width="6%" align="center" border="1" 
style="border-top:8px double black;
border-right:none;
border-left:none;
border-bottom:8px double black;
padding:8px;">
<a class="nav" href="#">Видео</a></td>
 
<td width="6%" align="center" border="1" 
style="border-top:8px double black;
border-right:none;
border-left:none;
border-bottom:8px double black;
padding:8px;">
<a class="nav" href="#" >Тексты</a></td>
 
<td width="6%" align="center" border="1" 
style="border-top:8px double black;
border-right:none;
border-left:none;
border-bottom:8px double black;
padding:8px;">
<a class="nav" href="#">Фото</a></td>
 
<td width="6%" align="center" border="1" 
style="border-top:8px double black;
border-right:none;
border-left:none;
border-bottom:8px double black;
padding:8px;">
<a class="nav" href="#">О нас</a></td>
 
<td width="6%" align="center" border="1" 
style="border-top:8px double black;
border-right:none;
border-left:none;
border-bottom:8px double black;
padding:8px;">
<a class="nav" href="#">Контакты</a>
 
<td width="1%" border="1" 
style="border-top:8px double black;
border-right:8px double black;
border-left:none;
border-bottom:8px double black;
padding-left:1px;">&nbsp
</td>
 
</tr>
</table>
Отодвинуть с помощью background-position не получается, т.к. задано repeat-x, которое я не могу отменить (иначе не получится однородного фона для всех ячеек).

Вообще, задача минимум: как-то всё-таки отодвинуть границы фона от краев боковых границ.
Задача максимум: оформить боковины более презентабельно, но пока я придумала только тот вариант, который вы видели на картинках.

Пожалуйста, помогите с задачей минимум.
Если будут идеи по задаче максимум, буду также очень признательна.
Ответ: А может создать таблицу с границами, внутри которой поместить таблицу навигации с фоном и проблема будет решена?
Вопрос: Отличия навигации и рекламы на сайте

Добрый день. Есть задача распарсить html страницу. Вытащить навигацию  на сайте и всю рекламу. 
Вопрос про навигацию на сайте, в html 5 есть тэг <nav>. Есть ли еще признаки, специальные тэги которые чаще всего используются для построения навигации на странице. Как отличить обычные ссылки от ссылок навигации на странице. 
Вопрос про рекламу через гиперссылки, рекламные банеры, тизерную рекламу, контекстную рекламу на сайте,  есть тэг <iframe> куда часто вставляют банеры, в мета тэги <meta> размер банеров. Есть ли еще признаки, специальные тэги, специальные вэб элементы, которые чаще всего используются для встраивания рекламы на странице. Как рекламный банер отличить от обычного  изображения на странице.  Заранее благодарен. 
Ответ:
Добрый день. Есть задача распарсить html страницу. Вытащить навигацию  на сайте и всю рекламу. 
Вопрос про навигацию на сайте, в html 5 есть тэг <nav>. Есть ли еще признаки, специальные тэги которые чаще всего используются для построения навигации на странице. Как отличить обычные ссылки от ссылок навигации на странице. 
Вопрос про рекламу через гиперссылки, рекламные банеры, тизерную рекламу, контекстную рекламу на сайте,  есть тэг <iframe> куда часто вставляют банеры, в мета тэги <meta> размер банеров. Есть ли еще признаки, специальные тэги, специальные вэб элементы, которые чаще всего используются для встраивания рекламы на странице. Как рекламный банер отличить от обычного  изображения на странице.  Заранее благодарен. 
Вопрос: Навигация как на мобилке

Здравствуйте, подскажите пожалуйста компонент который помогает осуществлять навигацию как на мобилках когда выбираешь что - нибудь и открывается в этом же контейнере и появляется стрелка вернуться назад, Спасибо
Ответ: Я думаю что уже реализовывали данный компонент, вот например вспомнил в sencha реализовали nested list:
http://docs.sencha.com/touch/2.4/com...sted_list.html
Но это именно вложенные списки с возможностью возврата к предыдущим, а мне надо чтобы были не списки а произвольный контент.
Вот например:
http://designer.igniteui.com/
В этом дизайнере витрин если вытащить какой - нибудь виджет то справа появиться таблица его свойст который будет это позволять, только там скорее nested property grid
Вопрос: Knockout js - Навигация по списку

Здравствуйте. У меня уже есть массив который отображаю на странице, всё хорошо , пока у меня записей 5-15 , но когда их станет больше то будет не удобно их просматривать. Я хочу сделать навигацию по списку, допустим что бы выводилось по 5 элементов списка и при щёлчке "далее" , можно было бы перейти на следующую страницу(посмотреть след 5 элементов). На коде будет немного понятнее :
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
self.pageSize = ko.observable(5); //-------------------- задаю кол-во элементов страницы
    self.currentPage = ko.observable(); // ------------------------ текущая страница
    self.totalPages = ko.dependentObservable(function () { // ------------------------ количество станиц
        return Math.ceil(self.UserMass().length / self.pageSize());
    }, self);
    self.navigate = function (e) { //--------------------- функция которая определяет id элемента по которому нажали
        var el = e.target;            // -------------- но она немного не работает 
        if (el === "next") {
            if (self.currentPage() < (self.totalPages() - 1)) { // тут думаю всё понятно 
                self.currentPage(self.currentPage() + 1);
            } else {
                if (self.currentPage() > 0) {
                    self.currentPage(self.currentPage() - 1);
                }
            }
        }
    }
 
    self.showCurrentPage = ko.dependentObservable(function () { 
        if (self.currentPage() > Math.ceil(self.UserMass().length / self.pageSize())) {
            self.currentPage(ko.utils.unwrapObservable(self.totalPages()) - 1); // как я понял unwrapOservable - возвращает точное значение изменяющегося элемента
        }
        var startIndex = self.pageSize() * self.currentPage();
        return self.UserMass().slice(startIndex, startIndex + self.pageSize()); // по идее именно здесь идёт разделение массива(списка) на страницы , но не срабатывает(т.е. разделение вроде идёт но отображается весь массив)
    }, self);
вот что в html :
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<nav id="paging">
                <a id="first" title="First page" href="#" data-bind="click: function() { currentPage(0); }, css: { disabled: currentPage() === 0 }">Первая</a>
                <a id="prev" title="Previous Page" href="#" data-bind="click: function (data, event) { navigate(event) }, css: { disabled: currentPage() === 0 }">«</a>
                <ul data-bind="template: 'pagingTemplate'"></ul>
                <a id="next" title="Next Page" href="#" data-bind="click: function (data, event) { navigate(event) }, css: { disabled: currentPage() === totalPages() - 1 }">»</a>
                <a id="last" title="Last Page" href="#" data-bind="click: function() { currentPage(totalPages() - 1); }, css: { disabled: currentPage() === totalPages() - 1 }">Последняя</a>
            </nav>
            <script id="pagingTemplate" type="text/x-jquery-tmpl">
{{each(i) ko.utils.range(1, totalPages)}}
    <li>
        <a href="#" title="View page ${ i + 1 }" data-bind="click: function() { currentPage(i) }, css: { on: i === currentPage() }">${ i + 1 }</a>
    </li>
{{/each}}
            </script>
Источник по которому пытаюсь сделать : . Подскажите пожалуйста в чём ошибка и как лучше сделать эту навигацию. Заранее спасибо
Ответ: C Knockout я сталкиваюсь часто, и такую задачу просят решить в каждом третьем проекте ))

Есть такая наработка:

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
ko.extenders.pager = function(oa, options){ // oa - оригинальный observableArray
 
    var me = oa.pager = { // объект пейджера
        pageSize: ko.observable(options.pageSize || 10),
        pageCurr: ko.observable(0)
    };
 
    me.numPages = ko.computed(function(){
        return Math.ceil(oa().length / me.pageSize());
    });
 
    // предохранитель от неверного значения в pageCurr
    ko.computed(function(){
        var curr = me.pageCurr, curr_max = me.numPages() - 1;
        if (curr() > curr_max) curr(curr_max);
        if (curr() < 0) curr(0);  
    })
    
    me.pageItems = ko.computed(function(){
        if (oa().length == 0) return [];
        var curr = me.pageCurr(), size = me.pageSize();
        return oa().slice(curr * size, curr * size + size);
    });
 
    // навигация
    me.nav = {
        links: ko.computed(function(){
            var links = [],
                seek = function(link){ me.pageCurr(link.index); };
            for (var i = 0; i < me.numPages(); i++) {
                links.push({
                    index: i,
                    isFirst: i == 0,
                    isLast:  i == me.numPages() - 1,
                    isCurrent: i == me.pageCurr(),
                    seek: seek
                });
            }
            return links;
        }),
        next: {
            enabled: ko.computed(function(){ return me.pageCurr() < (me.numPages() - 1); }),
            seek: function(){ me.pageCurr(me.pageCurr() + 1); }
        },
        prev: {
            enabled: ko.computed(function(){ return me.pageCurr() > 0; }),
            seek: function(){ me.pageCurr(me.pageCurr() - 1); }
        }
    };
 
    return oa; // возвращаем оригинальный объект
};
Это расширение для любого observableArray, добавляющее ему пейджер (постраничный вывод). Вкратце: его я обычно выношу в отдельный подключаемый скрипт и потом вызываю для массива, который планируется выводить постранично.

Вот пример использования:

Если непонятно что-то, спрашивайте или пишите на почту (я сейчас отвечу вам на сообщение в привате).
Вопрос: Получить данные из строки с отмеченным чекбоксом таблицы Jquery DataTables

Есть таблица, выведенная из MySQL. Для сортировки и постраничной навигации используется плагин Jquery DataTables.
Плагин подключил таким образом:
Javascript
1
2
3
<script type="text/javascript">
$(document).ready(function() {var table = $("#part_s").DataTable({'columnDefs': [{'targets': -1, 'checkboxes': {'selectRow': true} }], 'select': {'style': 'multi'}, 'render': function (data, type, full, meta){return '<input type="checkbox">';}, }) });
</script>
Часть кода вывода таблицы:

PHP
1
2
3
4
echo '<tbody>';
while($data = mysql_fetch_array($qr_result)){ 
echo '<tr class="rowlink_table_parts">';
echo '<td class="id">' . $data['NumPP_Part'] . '</td>';
В <td class="id">' . $data['NumPP_Part'] . '</td> - номер по порядку (он же первичный ключ в таблице БД).

Как получить значение этой ячейки в строке, где выбран чекбокс?
Ответ: Т.е. по разному работают?

Вывожу дальше cell через alert - неопределённая переменная cell.

И так ли надо присваивать новый класс строке таблицы, если он уже есть (rowlink_table_parts)?

В ступоре от плагина. Неужели разработчики плагина не смогли нормально всё сделать?

Добавлено через 23 часа 52 минуты
Уф, спасибо за помощь и код.
Думаю обойтись без чекбоксов, на этом примере:

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
35
36
37
38
39
40
41
<button id="button">btn</button>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function () {
    var table = $('#example').DataTable();
 
    $('#example tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
    });
 
    $('#button').click(function () {
        var ids = $.map(table.rows('.selected').data(), function (item) {
            return item[0]
        });
        console.log(ids)
        alert(table.rows('.selected').data().length + ' row(s) selected');
    });
});
Вопрос: Найти 1й элемент 2го элемента таблицы

Ни 1 способ не работает...

PHPHTML
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
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript">
            function main()
            {
                var t = document.querySelectorAll('table')
 
                alert(t.lastChild.innerHTML)
                alert(t.firstChild.innerHTML)
                alert(t.firstElementChild.innerHTML)
                alert(t.lastElementChild.innerHTML)
                alert(t.childNodes[1].innerHTML)
                alert(t.children[1].innerHTML)
            }
            document.addEventListener('DOMContentLoaded', main)
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td>Нужен этот элемент</td>
                <td>3</td>
            </tr>
        </table>
    </body>
</html>
Добавлено через 13 минут
А, не, оказывается для таблиц своя навигация...

PHPHTML
1
alert(t.rows[1].cells[0].innerHTML)
Ответ: Каждый день тут пишут одно и то же - все методы поиска элементов, кроме getElementbyId и querySelector, возвращают коллекцию. Это раз.
В table всегда будет присутствовать tbody, независимо от того, указали его явно или нет. Это два.
Для работы с таблицами есть специальные методы
"Найти 1й элемент 2го элемента таблицы"
Javascript
1
2
3
var t = document.querySelectorAll('table');
 
alert(t[0].rows[1].cells[0].innerHTML);
Вопрос: Таблица вылазит за пределы DIV

Таблица вылазит за пределы контента при прокрутке масштаба, как исправить?

Код 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Основы HTML и CSS</title>
<style>
body {
            background: #f3f2f3;
            color: #000000;
            font-family: Trebuchet MS, Arial, Times New Roman;
            font-size: 12px;
}
 
#container {
            background: #FFFFFF;
            margin: 30px auto;
            width: 900px;
            height: 1000px;
}
 
#header {
            background: #838283;
            height: 200px;
            width: 900px;
}
 
#navigation {
            background: #a2a2a2;
            width: 900px;
            height: 20px;
}
 
#menu {
            background: #333333;
            float: left;
            width: 200px;
            height: 100%;
}
 
#content {
            background: #d2d0d2;
            float: right;
 
            width: 700px;
            height: 100%;
}
 
#clear {
            clear:both;
}
 
#footer {
            background: #838283;
            height: 180px;
            width: 900px;
}
 
</style>
</head>
 
<body>
 
            <div id="container">
                        <div id="header">Шапка сайта
 
                        </div>
 
                        <div id="navigation">Блок навигации
 
                        </div>
 
                        <div id="menu">Меню
 
                        </div>
 
                        <div id="content">
                        
                         <table  border="0" width="100%" height="100%">
                        <tr>
                        <td colspan="3">
                        <h2><b>Оформите заказ и наш менеджер свяжется с вами!</b></h2>
                        <form name="MyForm" action="mail.php" method="post">
                        <p><input class="input" name="name" type="text" style="width:25%" /> <b>Ф.И.О.*</b></p>
                         
                        <p><input class="input" name="tel" type="text" style="width:25%" /> <b>Телефон*</b></p>
                         
                        <p><input class="input" name="address" type="text" style="width:25%" /> <b>Адрес*</b> </p>
                        
                        <p><input class="input" name="email" type="text" style="width:25%" /> <b>Email</b> </p>
                        
                        <p><input class="input" name="model" type="text" style="width:25%" /> <b>Модель оборудования</b> </p>
                         
                        <p><b>Коментарий к заказу:</b><br /><br /><textarea name="body" cols="1" rows="5" style="width:30%" /></textarea></p>
                        <p><input id="submit" value="Отправить" type="submit" /></p>
                        </form>
                        </td>
                        </tr>
                        <th colspan="3">Лушиче товары 2015</th>
                        <tr>
                        <th  bgcolor="#f7f7f7"  align="center"><a href="#"><img src="images/1.jpg"></a></th>
                        <th  bgcolor="#f7f7f7" align="center"><a href="#"><img src="images/2.jpg" border="1"></a></th>
                        <th  bgcolor="#f7f7f7" align="center"><a href="#"><img src="images/3.jpg"></a></th>
                        </tr>
                        <tr>
                        <th  bgcolor="#f7f7f7" align="center"><font size="2px"><font color="0006ff">cgkbn Samsung </font></font><br /><br /><font color="#8d0000"><b><font size="5px">1200 Р.</b></font></font></th>
                        <th  bgcolor="#f7f7f7" align="center"><font size="2px"><font color="0006ff">cgkbn Samsung </font></font><br /><br /><font color="#8d0000"><b><font size="5px">1200 Р.</b></font></font></th>
                        <th  bgcolor="#f7f7f7" align="center"><font size="2px"><font color="0006ff">cgkbn Samsung </font></font><br /><br /><font color="#8d0000"><b><font size="5px">1200 Р.</b></font></font></th>
                        </tr>
                        <tr>
                        <th  bgcolor="#f7f7f7"  align="center"><a href="#"><img src="images/1.jpg"></a></th>
                        <th  bgcolor="#f7f7f7" align="center"><a href="#"><img src="images/2.jpg" border="1"></a></th>
                        <th  bgcolor="#f7f7f7" align="center"><a href="#"><img src="images/3.jpg"></a></th>
                        </tr>
                        <tr>
                        <th  bgcolor="#f7f7f7" align="center">Samsung <br /><br /><font color="#8d0000"><b>Цена:1200 Руб.</b></font></th>
                        <th  bgcolor="#f7f7f7" align="center">Sony <br /><br /><font color="#8d0000"><b>Цена:1555 Руб.</b></font></th>
                        <th  bgcolor="#f7f7f7" align="center">Panasonic<br /><br /><font color="#8d0000"><b>Цена:7777 Руб.</b></font></th>
                        </tr>
                        </table>
 
                        </div>
 
                        <div id="clear">
 
                        </div>
                       
                        <div id="footer">Подвал сайта
 
                        </div>
            </div>
 
</body>
</html>
Ответ: Я так понимаю стили к таблице вы здесь указываете?
Код CSS
1
2
3
4
5
6
7
#content {
            background: #d2d0d2;
            float: right;
 
            width: 700px;
            height: 100%;
}
Вопрос: Фиксация навигации после определённого блока

Как сделать чтобы навигация появлялась после скроллинга определённого блока? Допустим как пользователь пролистал "top-section" и дошел до "about-section", и только тогда появлялось меню?

Пример:
<div id="topsection">
content
</div>

<div id="about-section">...
Ответ: Ну так повесь на абаут-секшн addEventListener('scroll',func) и как только верх ебаута станет меньше нуля проявляй навигацию.