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

Уважаемые сайтостроители, пролейте свет на один вопрос: что лучше использовать для построения таблиц - <div> или <table>? Проанализировав некоторую информацию из Интернета, пришел к выводу, что тег <div> использовать более удачно. Подскажите, как построить таблицу как на рисунке, используя <div>.
Ответ: Подскажите как сделать в диве вот такую таблицу
<table width="200" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td rowspan="4">17</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>

спасибо
Вопрос: При определенном значении чекбокса показывать соответствующую таблицу

Добрый вечер! Будьте добры, подскажите как сделать) Есть 4 чекбокса и при выборе должна появляться соответствующая табличка. Пробовала написать, но не выходит. Не могу понять в чем ошибка, хотя там скорее всего пустяк.
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
133
134
135
136
137
138
139
140
<div class="form-group row clearfix col-lg-12 col-md-12 col-sm-12 col-xs-12 themes">
                 тематика:
            </div>
            <div class="form-group row clearfix col-lg-12 col-md-12 col-sm-12 col-xs-12 check">
                <div class="wrapper-checkbox">  
                    <input id="pension" name="pension" value="pension" type="checkbox">
                        <label for="pension"><span></span>Пенсионные</label>
                </div>      
                
            <div class="form-group row clearfix col-lg-12 col-md-12 col-sm-12 col-xs-12 check">
                <div class="wrapper-checkbox">
                    <input id="business" name="business" value="business" type="checkbox">
                        <label for="business"><span></span>Предпринимательские</label>
                </div>      
                
            <div class="form-group row clearfix col-lg-12 col-md-12 col-sm-12 col-xs-12 check">
                <div class="wrapper-checkbox">
                    <input id="banking" name="banking" value="banking" type="checkbox">
                        <label for="banking"><span></span>«Банковское дело»</label>
                </div>      
                
            <div class="form-group row clearfix col-lg-12 col-md-12 col-sm-12 col-xs-12 check">
                <div class="wrapper-checkbox">
                    <input id="seminars" name="seminars" value="seminars" type="checkbox">
                        <label for="seminars"><span></span>Семинары по запросам слушателей</label>
                </div>  
 
 
<table class="table table-bordered title-table"> 
                            <tbody> 
                                <tr> 
                                    <td><strong>Дата</strong></td>
                                    <td><strong>Тема лекции/семинара</strong></td>
                                </tr>
                            </tbody>
                         </table>
                        <table class="table table-bordered" id="one-table"> 
                            <tbody> 
                                <tr>
                                    <td>2 ноября <br>Начало в 15.00</td>
                                    <td>Построение* эффективного* Отдела* продаж.* Специфика* работы* в* рынках* «B tо C»,* «B to B»</td>
                                                
                                </tr>
                                <tr>
                                    <td>9 ноября <br>Начало в 15.00</td>
                                    <td>Выбор оптимальной системы налогообложения для малого бизнеса</td>
                                </tr>
                                <tr>
                                    <td>16 ноября <br>Начало в 15.00</td>
                                    <td>«Контракты в сфере госзакупок. Инструкция для малого бизнеса»</td>             
                                </tr>
                                <tr>
                                    <td>23 ноября <br>Начало в 15.00</td>
                                    <td>Составление бизнес-плана для малого бизнеса. Финансирование для начинающих предпринимателей.</td>
                                                
                                </tr>
                                <tr>
                                    <td>30 ноября <br>Начало в 15.00</td>
                                    <td>Бизнес-игра "День чужих идей"</td>
                                                
                                </tr>
                                <tr>
                                    <td>7 декабря <br>Начало в 15.00</td>
                                    <td>Жизненные* циклы* организации -* роль* лидера* на* каждом* этапе</td>
                                                
                                </tr>
                            </tbody>
                         </table>
                         <table class="table table-bordered" id="two-table"> 
                            <tbody> 
                                <tr>
                                    <td>25 октября<br> Начало в 10.30</td>
                                    <td>Управление личным капиталом. Как выбрать наиболее подходящий вклад. </td>
                                    
                                </tr>
                                <tr>
                                   <td>1 ноября<br>Начало в 10.30</td>
                                    <td>Особенности кредитования в банке и микрофинансовых организациях.<br>Правила безопасного использования банковских карты.</td>
                                </tr>
                                <tr>
                                    <td>8 ноября <br>Начало в 10.30</td>
                                    <td>Обучение работе с терминалом самообсуживания и интернет-банком.</td>
                                    
                                </tr>
                                <tr>
                                    <td>15 ноября <br>Начало в 10.30</td>
                                    <td>Управление личным капиталом. Как выбрать наиболее подходящий вклад. </td>
                                    
                                </tr>
                                <tr>
                                    <td>21 ноября <br>Начало в 16.30</td>
                                    <td>Пенсионная система РФ. Персонифицированный учет в системе государственного пенсионного страхования.</td>
                                    
                                </tr>
                                <tr>
                                    <td>22 ноября <br>Начало в 10.30</td>
                                    <td>Особенности кредитования в банке и микрофинансовых организациях. <br>Правила безопасного использования банковских карты.</td>
                                </tr>
                                <tr>
                                    <td>29 ноября <br>Начало в 10.30</td>
                                    <td>Обучение работе с терминалом самообсуживания и интернет-банком.</td>
                                </tr>
                            </tbody>
                         </table>
                         <table class="table table-bordered" id="three-table"> 
                            <tbody> 
                                <tr>
                                    <td>25 октября<br> Начало в 10.30</td>
                                    <td>Управление личным капиталом. Как выбрать наиболее подходящий вклад. </td>
                                    
                                </tr>
                                <tr>
                                   <td>1 ноября<br>Начало в 10.30</td>
                                    <td>Особенности кредитования в банке и микрофинансовых организациях.<br>Правила безопасного использования банковских карты.</td>
                                </tr>
                                <tr>
                                    <td>8 ноября <br>Начало в 10.30</td>
                                    <td>Обучение работе с терминалом самообсуживания и интернет-банком.</td>
                                    
                                </tr>
                                <tr>
                                    <td>15 ноября <br>Начало в 10.30</td>
                                    <td>Управление личным капиталом. Как выбрать наиболее подходящий вклад. </td>
                                    
                                </tr>
                                <tr>
                                    <td>21 ноября <br>Начало в 16.30</td>
                                    <td>Пенсионная система РФ. Персонифицированный учет в системе государственного пенсионного страхования.</td>
                                    
                                </tr>
                                <tr>
                                    <td>22 ноября <br>Начало в 10.30</td>
                                    <td>Особенности кредитования в банке и микрофинансовых организациях. <br>Правила безопасного использования банковских карты.</td>
                                </tr>
                                <tr>
                                    <td>29 ноября <br>Начало в 10.30</td>
                                    <td>Обучение работе с терминалом самообсуживания и интернет-банком.</td>
                                </tr>
                            </tbody>
                         </table>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('input:checkbox').change(function(){
            var valueCheck = $(this).val();
            
            if(valueCheck == pension){
                $("#two-table").show();
                $("#one-table").hide();
                $("#three-table").hide();
            }
             else if((valueCheck == business) || (valueCheck == banking)){
                $("#one-table").show();
                $("#two-table").hide();
                $("#three-table").hide();
            } 
            else{
                $("#one-table").show();
                $("#two-table").show();
                $("#three-table").show();
            } 
});
Ответ: KyponaTka, Т.е. при выборе нескольких тем нужно показывать несколько таблиц?
Вопрос: Динамическая таблица данных

Доброго времени суток!

Есть таблица создаваемая на js -

var t = document.createElement('table');
var tbody = document.createElement('tbody');
for(var i = 0;i<6;i++) {

    var tr = document.createElement('tr');
	for (var j = 0;j<16;j++){
    var td = document.createElement('td');
    tr.appendChild(td);
	td.id="td";
	td.onclick = function(){$('#exampleModal').arcticmodal(); };

}
   tbody.appendChild(tr);
}
t.appendChild(tbody);

document.getElementById('table').appendChild(t);


t.rows[0].cells[0].innerHTML="Ц/Ц";
t.rows[1].cells[0].innerHTML="1 год";
t.rows[2].cells[0].innerHTML="I квартал";
t.rows[3].cells[0].innerHTML="II квартал";
t.rows[4].cells[0].innerHTML="III квартал";
t.rows[5].cells[0].innerHTML="IV квартал";

var arr = [{year_line}];
for (var i = 0; i < arr.length; i++) {
  t.rows[0].cells[i+1].innerHTML=arr[i];
}


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

Смысл в том, чтобы по клику на ячейку в модальном окне редактировать её значение а потом посредством ajax пересылать информацию в бд. Подскажите как связать каждую ячейку с базой данных...как передать эти данные.
Ответ:
Сообщение от MouseOver
Смысл в том, чтобы по клику на ячейку в модальном окне редактировать её значение а потом посредством ajax пересылать информацию в бд.
По одному значению слать запрос в базу? А может быть лучше изменить все и отправить массив изменений один раз?

Таблица в базе и ее структура должны быть уже определены, не может js породить какую-то произвольную таблицу, а база догадаться что теперь с ее данными делать. Другими словами вы загодя уже знаете, что столбец Ц/Ц описывает в таблице mytable поле name, а столбец 4 поле field4 и т.д. И именно по этим данным и их структуре js должен готовить таблицу на клиенте.

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

Поэтому скорее от вас требуется пояснение - структура вашей sql-таблицы, которую нужно связать с html-таблицей? Можно заменить, что не обязательно светить именами полей sql-таблицы на клиенте, имена полей sql-таблицы можно связать по их индексам с индексами колонок html-таблицы. Но строки таблицы только с уникальными идентификаторами записей sql-таблицы.
Вопрос: Изменения ширины ячейки в динамической таблице на JavaScript

Всем день добрый! Прошу помочь разобраться с динамической таблицей сформированной на HTML+Javascript.
В Javascript волоку не очень.
Проблема заключается в изменения ширины ячейки в динамической таблице. Пробовал указывать размеры в css и html, до формирования таблицы размеры соблюдаются но после выбора типа аппарата, размеры становятся одинаковыми и не как не помещаются в ширину монитора. Боюсь как бы не пришлось делать фиксированный первые 2 столбика динамической таблицы.
Проблема как я понял заключается в Javascript из-за этого тему создал именно тут.
Если вдруг ошибся разделом -прошу больно ногами не пинать.
Кликните здесь для просмотра всего текста

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
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
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<center>
<form method="post" action="">
    <table width="60" align="center" border="1" cellspacing="0"><!--пробовал менять значения здесь-->
        <caption>
            <!-- Кол-во элементов option и их значения value можно задать произвольно //-->
            <select id="rows_setup">
                <option value="0">--Укажите тип аппарата--</option>
                <option value="16">АВО с разъемными литыми крышками на давление до 6,3 МПа</option>
                <option value="17">АВО с цельносварными камерами с пробками на давление до 10 МПа</option>
                <option value="21">АВО со сварными крышками на давление до 6,3 МПа</option>
                <option value="12">Теплообменник с неподвижными трубными решетками</option>
                <option value="12">Трубные пучки с плавающей головкой с U-образными трубами</option>
            </select>
        </caption>
        <!-- Заголовки //-->
        <thead>
        <tr>
            <th scope="col">Детали</th>
            <th scope="col">Дата</th>
            <th scope="col">1 неделя</th>
            <th scope="col">2 неделя</th>
            <th scope="col">3 неделя</th>
            <th scope="col">4 неделя</th>
            <th scope="col">5 неделя</th>
            <th scope="col">6 неделя</th>
            <th scope="col">7 неделя</th>
            <th scope="col">8 неделя</th>
            <th scope="col">9 неделя</th>
            <th scope="col">10 неделя</th>
            <th scope="col">11 неделя</th>
            <th scope="col">12 неделя</th>
            <th scope="col">13 неделя</th>
            <th scope="col">14 неделя</th>
            <th scope="col">15 неделя</th>
            <th scope="col">16 неделя</th>
            <th scope="col">17 неделя</th>
            <th scope="col">18 неделя</th>
            <th scope="col">19 неделя</th>
            <th scope="col">20 неделя</th>
        </tr>
        </thead>
    
        <!-- Сюда будем добавлять строки //-->
        <tbody id="dynamic"></tbody>
    </table>
    <input name="sub" type="submit" value="Построить">
</form>
<script>
    /* Навешиваем логику: */
    
    setupTable(
        "dynamic", /* ID элемента <tbody> таблицы */
        "rows_setup", /* ID элемента <select> для установки кол-ва строк */
        {1:"val1", 2:"val2", 3:"val3", 4:"val4", 5:"val5", 6:"val6", 7:"val7", 8:"val8", 9:"val9", 10:"val10", 11:"val11", 12:"val12", 13:"val13",
        14:"val14", 15:"val15", 16:"val16", 17:"val17", 18:"val18", 19:"val19", 20:"val20", 21:"val20", 22:"val20"}, /* Конфигурация строки таблицы */
 
        function (row, fieldName) { /* Ф-ция должна возвращать HTMLElement тип - поле формы */
            var ELEMENT = document.createElement("INPUT");          
 
            ELEMENT.name = fieldName + "[]";
            ELEMENT.type = 'text';
            return ELEMENT;         
        }       
    );
    /**
 * @param {String} tableId ID элемента tbody таблицы
 * @param {String} selectId ID элемента select для установки кол-ва строк
 * @param {Object} fields Конфигурация строки таблицы: {1:"field_name1", 2:"field_name2", ... и т.д. }
 * @param {Function} creatorCallback - ф-ция обратного вызова принимающая два параметра:
 *      {Number} - номер строки таблицы,
 *      {String} - имя поля из объекта fields
 */
function setupTable(tableId, selectId, fields, creatorCallback) {
    var htmlTBody   = document.getElementById(tableId),
        htmlSelect  = document.getElementById(selectId),
        rowTpl      = document.createElement("TR"),
        rowNum      = 1,
        ELEMENT, TD;
    /* Строим шаблон строки таблицы один раз, в дальнейшем будем просто его клонировать */
    for(var field in fields) {
        if (false === fields.hasOwnProperty(field)) { continue; }
        TD = document.createElement("TD");
        if (creatorCallback) {
            ELEMENT = creatorCallback(rowNum, fields[field])
        } else {
            ELEMENT = document.createElement("INPUT");
            ELEMENT.name = fields[field] + "[]";
        }
 
        TD.appendChild(ELEMENT);
        rowTpl.appendChild(TD);
 
        rowNum += 1;
    }
    
    // Вешаем обработчик на элемент управления кол-вом строк
    htmlSelect.onchange = function (e) {
        var numRows = htmlSelect.options[htmlSelect.selectedIndex].value;
        /* Отслеживаем отрицательные значения а то мало ли какие там значения в option понаставят */
        numRows = numRows < 0 ? 0 : numRows;
        /* Удаляем те строки которые есть. */
        while(htmlTBody.firstChild) {
            htmlTBody.removeChild(htmlTBody.firstChild);
        }
        for (var i = 0; i < numRows; i++) {
            htmlTBody.appendChild(rowTpl.cloneNode(true));
        }
    };
}
</script>
</center>
</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
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
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<br>
<center>
<style>
* {
paddding:0;
margin:0;
box-sizing:border-box;
}
#dynamic input[type="text"] {width:65px; padding}
#dynamic tr td:first-child input[type="text"]{width:200px}
</style>
<form method="post" action="">
     <table width="800" border="1" cellspacing="-20" cellpadding="-120">
        <caption>
            <!-- Кол-во элементов option и их значения value можно задать произвольно //-->
            <select id="rows_setup">
                <option value="0">--Укажите тип аппарата--</option>
                <option value="16">АВО с разъемными литыми крышками на давление до 6,3 МПа</option>
                <option value="17">АВО с цельносварными камерами с пробками на давление до 10 МПа</option>
                <option value="21">АВО со сварными крышками на давление до 6,3 МПа</option>
                <option value="12">Теплообменник с неподвижными трубными решетками</option>
                <option value="12">Трубные пучки с плавающей головкой с U-образными трубами</option>
            </select>
        </caption>
        <!-- Заголовки //-->
        <thead>
        <tr>
            <th>Детали</th>
            <th>Дата</th>
            <th>1 неделя</th>
            <th>2 неделя</th>
            <th>3 неделя</th>
            <th>4 неделя</th>
            <th>5 неделя</th>
            <th>6 неделя</th>
            <th>7 неделя</th>
            <th>8 неделя</th>
            <th>9 неделя</th>
            <th>10 неделя</th>
            <th>11 неделя</th>
            <th>12 неделя</th>
            <th>13 неделя</th>
            <th>14 неделя</th>
            <th>15 неделя</th>
            <th>16 неделя</th>
            <th>17 неделя</th>
            <th>18 неделя</th>
            <th>19 неделя</th>
            <th>20 неделя</th>
        </tr>
        </thead>
    
        <!-- Сюда будем добавлять строки //-->
        <tbody id="dynamic"></tbody>
    </table>
    <input name="sub" type="submit" value="Построить">
</form>
<script>
 /* Навешиваем логику: */
 
    setupTable(
        "dynamic", /* ID элемента <tbody> таблицы */
        "rows_setup", /* ID элемента <select> для установки кол-ва строк */
        {1:"val1", 2:"val2", 3:"val3", 4:"val4", 5:"val5", 6:"val6", 7:"val7", 8:"val8", 9:"val9", 10:"val10", 11:"val11", 12:"val12", 13:"val13",
        14:"val14", 15:"val15", 16:"val16", 17:"val17", 18:"val18", 19:"val19", 20:"val20", 21:"val20", 22:"val20"}, /* Конфигурация строки таблицы */
 
        function (row, fieldName) { /* Ф-ция должна возвращать HTMLElement тип - поле формы */
            var ELEMENT = document.createElement("INPUT");          
 
            ELEMENT.name = fieldName + "[]";
            ELEMENT.type = 'text';
            if(row === 1) {
                ELEMENT.value = "dataText";
            }
            return ELEMENT;         
        }       
    );
    /**
 * @param {String} tableId ID элемента tbody таблицы
 * @param {String} selectId ID элемента select для установки кол-ва строк
 * @param {Object} fields Конфигурация строки таблицы: {1:"field_name1", 2:"field_name2", ... и т.д. }
 * @param {Function} creatorCallback - ф-ция обратного вызова принимающая два параметра:
 *      {Number} - номер строки таблицы,
 *      {String} - имя поля из объекта fields
 */
function setupTable(tableId, selectId, fields, creatorCallback) {
    var htmlTBody   = document.getElementById(tableId),
        htmlSelect  = document.getElementById(selectId),
        rowTpl      = document.createElement("TR"),
        rowNum      = 1,
        ELEMENT, TD;
    /* Строим шаблон строки таблицы один раз, в дальнейшем будем просто его клонировать */
    for(var field in fields) {
        if (false === fields.hasOwnProperty(field)) { continue; }
        TD = document.createElement("TD");
        if (creatorCallback) {
            ELEMENT = creatorCallback(rowNum, fields[field]);
            
        } else {
            ELEMENT = document.createElement("INPUT");
            ELEMENT.name = fields[field] + "[]";
        }
 
        TD.appendChild(ELEMENT);
        rowTpl.appendChild(TD); 
        rowNum += 1;
    }
    
    // Вешаем обработчик на элемент управления кол-вом строк
    htmlSelect.onchange = function (e) {
        var numRows = htmlSelect.options[htmlSelect.selectedIndex].value;
        /* Отслеживаем отрицательные значения а то мало ли какие там значения в option понаставят */
        numRows = numRows < 0 ? 0 : numRows;
        /* Удаляем те строки которые есть. */
        while(htmlTBody.firstChild) {
            htmlTBody.removeChild(htmlTBody.firstChild);
        }
        for (var i = 0; i < numRows; i++) {
            htmlTBody.appendChild(rowTpl.cloneNode(true));
        }
    };
}
</script>
</center>
</body>
</html>
Вопрос: Не обрабатываются события в динамически добавленых строках таблицы

Добрый день!

Мне на странице надо иметь возможность динамически добавить строчки в таблицу (в примере ниже работает нормально), и дать возможность перехода между полями таблицы при помощи стрелок навигации на клавиатуре (работает не вполне правильно). Проблема в том, что навигация при помощи стрелок между полями таблицы работает только в полях таблицы, которые уже имелись на странице в 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();
});

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

привет. такая проблема:надо написать код для работы с таблицой. данные в таблицу уже занесены
проблема собственно в чем надо чтобы в таблице искало значение ,обновляло ,добавляло и удаляло строки. У меня после добавление новых данных в таблице они не удаляются,а те которые были изначально удаляются.
Как сделать чтобы после добавления данных можно было удалить их?
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
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
<!doctype html>
<html>
<head>
<title>Сортировка массивов</title>
<meta charset="utf-8">
<script type="text/javascript">
function SeekRow(myTable) {
    var c1=document.getElementById("nom");
    var c2=document.getElementById("fio");
    var t=document.getElementById(myTable);
    var r=t.getElementsByTagName("tr");
    for (var j=1;j<r.length;j++) {// Пробугаем по всем строкам таблицам
        d=r[j].getElementsByTagName("td");
        if (c1.value==d[0].innerHTML && c2.value==d[1].innerHTML ){
        document.getElementById("pol").value=d[2].innerHTML;    
        document.getElementById("sred").value=d[3].innerHTML;   
        document.getElementById("nom1").value=d[0].innerHTML;   
        document.getElementById("fio1").value=d[1].innerHTML;
        return
        }
 
 
    }   
    alert("Запись с такими значениями полей класса и фио не существует");
}
function ApdateRow(myTable) {
    var c1=document.getElementById("nom1");
    var c2=document.getElementById("fio1");
    var t=document.getElementById(myTable);
    var r=t.getElementsByTagName("tr");
    for (var j=1;j<r.length;j++) {// Пробугаем по всем строкам таблицам
        d=r[j].getElementsByTagName("td");
        if (c1.value==d[0].innerHTML && c2.value==d[1].innerHTML ){
        d[0].innerHTML=document.getElementById("nom").value;    
        d[1].innerHTML=document.getElementById("fio").value;    
        d[2].innerHTML=document.getElementById("pol").value;    
        d[3].innerHTML=document.getElementById("sred").value;   
            return
                }
 
 
    }   
    alert("Запись с такими значениями полей класса и фио не существует");
}
function AddRow(id){
    var c=document.getElementById("nom");
    var e=document.getElementById("fio");
    var t=document.getElementsByTagName("table")[0];
    var r=t.getElementsByTagName ("tr");//alert("**");
    for (var j=1;j<r.length;j++) {// Пробегаем по всем строкам таблицам
        d=r[j].getElementsByTagName("td");
        if (c.value==d[0].innerHTML && e.value==d[1].innerHTML){
           alert("Запись с такими значениями полей класса и фио уже существует");
            return
        }
    }
     
    var row = document.createElement("TR");
    var td1 = document.createElement("TD");
    var td2 = document.createElement("TD");
    var td3 = document.createElement("TD");
    var td4 = document.createElement("TD");
    
    td1.innerHTML=document.getElementById("nom").value;
    td2.innerHTML=document.getElementById("fio").value;
    td3.innerHTML=document.getElementById("pol").value;
    td4.innerHTML=document.getElementById("sred").value;
 
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
    t.appendChild(row);
    
    document.getElementById("nom").value="";
    document.getElementById("fio").value="";
    document.getElementById("pol").value="";
    document.getElementById("sred").value="";
  }
  function DeleteRow(myTable) {
 
    var c=document.getElementById("nom");
    var e=document.getElementById("fio");
    var t=document.getElementsByTagName("table")[0];
    var r=t.getElementsByTagName ("tr");
    
    for (var j=0;j<r.length;j++) {// Пробугаем по всем строкам таблицам
        d=r[j].getElementsByTagName("td");
        if (c.value==d[0].innerHTML && e.value==d[1].innerHTML  ){
            t.deleteRow(j);
            return
        }
    }
    alert("Запись с такими значениями полей класса и фио не найдено ");
}
</script>
 
</head>
<body>
<table border=1 id='myTable'>
<tr><td align=center rowspan=2> № класса</td><td rowspan=2>Ф.И.О. школьника</td><td rowspan=2 >Пол</td></tr>
<tr><td >Средний бал</td></tr>
<tr><td>10А</td><td>Петров Иван</td><td>М</td><td>4,8</td></tr>
<tr><td>10А</td><td>Иванов Василий</td><td>М</td><td>4,2</td></tr>
<tr><td>10Б</td><td>Иванова Юлия</td><td>Ж</td><td>4,2</td></tr>
<tr><td>10Б</td><td>Иванов Сергей</td><td>М</td><td>3,8</td></tr>
<tr><td>10Б</td><td>Иванова Татьяна</td><td>Ж</td><td>4,8</td></tr>
<tr><td>10А</td><td>Сидоров Андрей</td><td>М</td><td>3,4</td></tr>
</table>
<form>
 <label for="nom">Номер класса </label>
  <input id="nom" size=30  waxwidth=30><br>
  <label for="fio">ФИО школьника</label>
  <input id="fio" size=30 waxwidth=2><br>
  <label for="pol">пол</label>
  <input id="pol" size=30 waxwidth=2><br>
  <label for="sred">средний бал</label>
  <input id="sred" size=30 waxwidth=2><br>
  <input type="button" value="найти запись в таблице" onclick="SeekRow('myTable')">
  <input type="button" value="обновить запись в таблицам" onclick="ApdateRow('myTable')">
  <input type=hidden id="nom1">
  <input type=hidden id="fio1">
  <input type="button" value="добавить новую запись" onclick="AddRow('myTable')">
<input type="button" value="удалить запись" onclick="DeleteRow('myTable')">
 
</form>
</body>
</html>
проблема находится в функции
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function DeleteRow(myTable) {
 
    var c=document.getElementById("nom");
    var e=document.getElementById("fio");
    var t=document.getElementsByTagName("table")[0];
    var r=t.getElementsByTagName ("tr");
    
    for (var j=0;j<r.length;j++) {// Пробугаем по всем строкам таблицам
        d=r[j].getElementsByTagName("td");
        if (c.value==d[0].innerHTML && e.value==d[1].innerHTML  ){
            t.deleteRow(j);
            return
        }
    }
    alert("Запись с такими значениями полей класса и фио не найдено ");
}
Подскажите как быть в такой ситуации что тут исправить
Ответ: DmiRials,
для работы с элементами таблиц (строками и ячейками) существуют специальные
свойства, коллекции и методы:
cellIndex -- возвращает индекс текущей ячейки в коллекции всех ячеек строки cells
rowIndex -- возвращает индекс текущей строки в коллекции всех строк таблицы rows

insertRow () -- добавляет строку в нужное место таблицы
deleteRow () -- удаляет строку с конкретным индексом
insertCell() -- добавляет ячейку в нужное место строки
deleteCell () -- удаляет ячейку с конкретным индексом

описание всего этого см. на
------
при работе с таблицами настоятельно рекомендую использовать не ваши getElementsByTagName (), createElement (), appendChild () и прочую лабуду, а именно перечисленные выше свойства, коллекции и методы -- это и проще, и правильнее
Вопрос: Разрыв таблицы при печати по тексту. Читать невозможно.

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

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

Скриншот:


Задача имеет универсальное решение или каждый раз индивидуально? Или есть код, который надо переделать под себя?

HTML код таблицы генерируется на PHP.
Ответ:
Скорее всего универсального решения нет. Говорю это опираясь только на свой опыт генерирования таблиц для pdf документов. Генерировал при помощи itext, ireport, fpdf. Что происходит при отрисовке таблиц:

У тебя есть большой блок (таблица), который не влазит в блок поменьше (страница a4).
В самом простом случае у тебя есть 500 строк, каждая по сантиметру высотой. Браузер при печати разобьет текст по строкам, и разрежет таблицу примерно там где надо, но скорее всего ты будешь видеть обрезанные границы таблицы.
Случай сложнее - у тебя есть 10 строк таблицы, каждая по высоте занимает чуть больше половины страницы. Если рисовать по одной строке, то у тебя будет очень много пустого места. Если рисовать по несколько строк, то каждая будет разрезана в неожиданных местах. Особенно это играет роль, когда внутри твоей таблицы есть рисунки.

Что мы делаем:
Определяем требования - если строка по высоте меньше чем 2 сантиметра, рисуем ее без разрезания. Иначе, либо доверяем браузеру разбить ее на оптимальные высоты, либо пишем свой велосипед, который будет сам решать как ее разбить на нужную высоту.

В момент печати, при помощи js:
клонируем таблицу
скрываем исходную таблицу
бежим по строчкам клонированной таблицы и считаем высоту
как только высота становится больше чем может влезть в страницу a4 -
клонируем клонированную таблицу
удаялем из второго клона весь html
перносим все строки з первого клона во второго
добавляем второго клона на стрницу (он должен попасть ровно на новую страницу)
повторяем пока все строки из исходной таблицы не будут помещены в html

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

Уважаемые специалисты!
Есть некая задача. На странице выводится простая таблица (!с возможностью редактирования):

Код страницы такой:
Код HTML5
1
2
3
4
5
6
7
8
9
<HTML><HEAD>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 8.00.7601.17514"></HEAD>
<BODY contenteditable="true">
<TABLE style="WIDTH: 100%"  bgColor=#ffffe1>
<TBODY>
<TR borderColor=#ffffe1>
<TD>Text XYZ</TD></TR></TBODY></TABLE>
</BODY></HTML>
Задача состоит в том, чтобы принудить пользователя редактировать текст именно внутри желтенькой таблицы, а не за ее пределами. Но принудить не получается, т.к. за таблицей можно также поставить курсор:


Реально ли сделать так, чтобы эту возможность убрать? Т.е. чтобы браузер "думал", что последний символ в документе - "Z", а не пустой символ после таблицы, как на предыдущем скриншоте. Меня это и устроит. Иными словами, чтобы при открытии страницы, при нажатии мышкой в любом месте ниже таблицы курсор становился в таблице (вот так):
Ответ:
Сообщение от Shakalaka
Вопрос, зачем вам нужны contenteditable элементы?
Сотрудники внутри таблицы пишут свое сообщение.
Сообщение от Shakalaka
Какая строка, о чем вы вообще?
См.скриншот 2, я же для вас со стрелочками нарисовал, показал. Уважайте труд других.

Спасибо за помощь. Не буду больше мучать. 1Ска не поддерживает такие скрипты с установкой фокуса, как вы указали. Она просто не отрабатывает их. Старый в ней браузер, с ограниченными возможностями.

Вообщем пришел все-таки к решению, которое пока устраивает (вернее, это лучше чем ничего). В параметрах таблицы указываю align="LEFT". И курсор после таблицы становится уже не снизу, а справа от таблицы (т.е. строки как таковой ниже таблицы уже нет). После этого при загрузке документа посылаю нажатие клавиши "влево" (опять прошу помидорами не кидаться, другого не вижу решения).
И курсор становится прямо в таблице.
При этом ниже таблицы пользователь уже курсор мышкой не поставит! Что вообщем-то и являлось целью.

Т.е. получилось так:
Код HTML5
1
2
3
4
5
6
7
8
9
<HTML><HEAD>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 8.00.7601.17514"></HEAD>
<BODY contenteditable="true">
<TABLE style="WIDTH: 100%"  bgColor=#ffffe1 align="LEFT">
<TBODY>
<TR borderColor=#ffffe1>
<TD>Text XYZ</TD></TR></TBODY></TABLE>
</BODY></HTML>
Спасибо еще раз.
В итоге покажу, что получилось вообще в целом (для чего это все извращение было):
Вопрос: Как создать редактируемую таблицу прямо на странице?

Привет!

Есть задача - организовать сотрудникам таблицы, причем чтобы они не видели только свое и ничего больше.
Таблицы простые, вот пример:



Эти же самые таблицы нужно вывести в одну отдельную страницу админа.

Средствами плагинов сделать не получается (использовала плагины таблиц+плагины типа Role Editor)

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

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

Сам вопрос. Можно ли c помощью php или html сделать таблицы на странице так, чтобы их можно было редактировать прямо тут же на странице, не заходя в редактор? Вот прям так, чтобы любой заходящий на сайт мог брать и редактировать и это сохранялось. (ну естественно эти страницы запаролены так что кто попало не войдет)

Как вариант - гугл таблицы вставить через iframe, но они долго подгружаются и вообще их вид не нравится, нагруженно. Поэтому хочется свою простую таблицу.
Ответ: нашла вот такой плагин WPF-jqGrid
Там каждая ячейка прописывается кодом. Может кто-то знает, что это за код? Точно не html, на php тоже не похоже. Просто чтобы знать, что именно гуглить. Хочу закодировать так, чтобы некоторые ячейки в этой таблице были видны адмнистратору но не видны остальным посетителям.

Добавлено через 4 минуты
не вставился в предыдущее сообщение скриншот страницы настроек плагина где код.. вот он

Вопрос: Разместить ячейки таблицы <td> с разних рядов <tr> в два столбца ода за одной

Как можно с помощью CSS на примере этой таблицы разместить все ячейки <td> с разних рядов <tr> одна за одной в два столбца?

Параметр:
Код CSS
1
.content table tr {float:left}
почему то не перемещает, хотя ячейки с самим текстом перемещает.
Код 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
<!DOCTYPE HTML>
<html>
 
<head>
</head>
 
<body>
 
<div class="content"><h1 style="text-align:center;">Таблица</h1>
<table>
<tbody>
 
<tr>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 1</td>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 2</td>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 3</td>
</tr>
 
<tr>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 4</td>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 5</td>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 6</td>
</tr>
 
</tbody>
</table>
</div>
 
<style>
.content {width:100%; max-width:960px; margin: 0 auto; border: 2px solid #888;}
.content table {width:100%;}
.content table td {float:left; width:46%;  margin:1%; border: 1px solid #ccc;}
.content table tr {float:left}
.content table td img {width:100%;}
</style>
 
</body>
</html>
Ответ:
Сообщение от Fedor92
Тогда делайте сетку из дивов вместо таблицы...
Надо именно такую таблицу использовать.
Так как данная таблица будет создаваться в редакторе WordPress, с выбранным шаблоном страницы, который уже и делает эти таблицы адаптивными и т.п.
Создаваться будет людьми не знакомыми с программирование.

Я не нашел хороших плагинов которые удобно выполняли создание и редактирование таблиц с колонками.
Один лишь плагин немного подходит, но все равно не то.

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

Добавлено через 23 часа 50 минут
А вот такое решение задачи средствами CSS:
Если добавить этот параметр:
Код CSS
1
table, thead, tbody, th, td, tr {display: block;}
То таблица перестает вести себя как таблица и ячейки с содержимым дружно выстраиваются одна за одной!
Будет ли правильно использовать данный параметр? Вроде как работает отлично

Например при уменьшении окна браузера меньше 1000px, ячейки выстраиваются одна за одной:
Код 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
<!DOCTYPE HTML>
<html>
 
<head>
</head>
 
<body>
 
<div class="content"><h1 style="text-align:center;">Таблица</h1>
<table>
<tbody>
 
<tr>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 1</td>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 2</td>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 3</td>
</tr>
 
<tr>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 4</td>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 5</td>
<td><img alt="Image" src="http://placehold.it/320x240/f0f0f0/ccc&text=image">Текст 6</td>
</tr>
 
</tbody>
</table>
</div>
 
<style>
.content {width:100%; max-width:960px; margin: 0 auto; border: 2px solid #888;}
.content table {width:100%;}
.content table td {float:left; width:46%;  margin:1%; border: 1px solid #ccc;}
.content table tr {float:left}
.content table td img {width:100%;}
 
@media (max-width: 1000px) {
    table, thead, tbody, th, td, tr {display: block;}
}
</style>
 
</body>
</html>