Работа с таблицей

@MrSmitt · Регистрация: 20.10.2013

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

Необходимо построить таблицу. Кол-во столбцов задаётся изначально в форме.

HTML5
1
2
3
4
5
6
    <form name = "forma">    
    <p>
              <input type="number" name = "num" id = "num"  value="0">
              <input type="button"   value="Подтвердить" >
        </p>
    </form>

Соответственно будет изменяться кол-во столбцов N, и индексы X₁- X_N. Вместо "0" нужно будет вводить любые числа.
Возможна ли реализация такой таблицы и как это сделать?

Заранее премного благодарен.

@Lazy_Den · 24.07.2016, 21:27

MrSmitt, а как со строками быть? И откуда будут браться "Вместо 0 любые числа"?
В общем, набросал вам простенький пример. Основные функции он выполняет, а доработаете уже сами.

HTML+JS

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<form name="forma">
    <p>
        Кол-во строк:
        <input type="number" id="rows" value="3">
    </p>
    <p>
        Кол-во колонок:
        <input type="number" id="cols" value="3">
    </p>
    <input type="submit" value="Подтвердить">
</form>
<output></output>

Что-то вроде плагина:

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
(function($) {
    var opts = {
        row: 1,
        col: 2,
        add: 'html'
    };
    var methods = {
        init: function(o) {
            var table = $('<table />');
            opts = $.extend(opts, o);
            if (opts.row <= 0 || opts.col <= 0) {
                return false;
            }
            for (var i = 0; i < opts.row; i++) {
                table.append(methods.makeRow(i));
            }
            this[opts.add](table);
        },
        makeRow: function(i) {
            var L = methods.letter(i);
            return $('<tr />', {
                    html: $('<td />').duplicate(opts.cols - 1)
                }).duplicate(2)
                .first()
                .find('td').each(function(i, el) {
                    $(el).html(L + '<sub>' + i + '</sub>');
                })
                .end()
                .prepend($('<td />', {
                    attr: {
                        rowspan: 2
                    },
                    text: L
                })).end();
        },
        letter: function(i) {
            var start = 65;
            return String.fromCharCode(i > start ? start : start + i);
        }
    };
    $.fn.duplicate = function(count) {
        var tmp = [];
        for (var i = 0; i < count; i++) {
            if (this[0].tagName === 'TD') {
                this.text(i);
            }
            $.merge(tmp, this.clone().get());
        }
        return this.pushStack(tmp);
    };
    $.fn.generateTable = function(o) {
        return methods.init.apply(this, arguments);
    };
}(jQuery));

Использование:

JavaScript
1
2
3
4
5
6
7
8
$('form').on('submit', function(e) {
    e.preventDefault();
    $('output').generateTable({
        row: $('#rows', this).val(),
        cols: $('#cols', this).val(),
        add: 'html' /* или append, prepend и т.д. */
    });
});

@MrSmitt · 24.07.2016, 22:23 **[ТС]**

Благодарю.

Сообщение от Lazy_Den

а как со строками быть? И откуда будут браться "Вместо 0 любые числа"?

Строк всегда 4 (не считая 1 столбец-"заголовок"), т.е. функционал добавления строк мне по сути и не нужен.
А вот вместо 0 необходим функционал , чтобы пользователь мог сам вводить туда числа.

@Lazy_Den · 24.07.2016, 22:29

Сообщение от MrSmitt

чтобы пользователь мог сам вводить туда числа

А если точнее? В какой момент он будет вводить, каким способом?

@MrSmitt · 25.07.2016, 16:43 **[ТС]**

Сообщение от Lazy_Den

В какой момент он будет вводить, каким способом?

После того как пользователь ввёл кол-во столбцов и создалась таблица, выбирая ячейки с "0" (в принципе 0 можно не заполнять, а оставить пустые места ну да ладно) он ручками с клавиатуры вводит туда новые значения.

@MrSmitt · 26.07.2016, 19:39 **[ТС]**

Нашёл необходимую мне реализацию , но не могу приспособить к вышенаписанному коду

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table border="1px">
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td>4</td>
    <td>5/td>
    <td>6/td>
</tr>
<tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
</tr>
</table>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function()    {
    $('td').click(function(e)   {
        //ловим элемент, по которому кликнули
        var t = e.target || e.srcElement;
        //получаем название тега
        var elm_name = t.tagName.toLowerCase();
        //если это инпут - ничего не делаем
        if(elm_name == 'input') {return false;}
        var val = $(this).html();
        var code = '<input type="text" id="edit" value="'+val+'" />';
        $(this).empty().append(code);
        $('#edit').focus();
        $('#edit').blur(function()  {
            var val = $(this).val();
            $(this).parent().empty().html(val);
        });
    });
});

@MrSmitt · 28.07.2016, 15:33 **[ТС]**

Спрошу просто, в теории вообще можно ли сделать изменение значений в таблице? И просто создание таблицы с заданным в html кол-ом столбцов БЕЗ плагина?

Добавлено через 17 часов 43 минуты
Форум советчиков, подскажите как получить доступ к ячейкам таблицы ?

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@MrSmitt 1 / 1 / 0 Регистрация: 20.10.2013 Сообщений: 141
	28.07.2016, 15:33 [ТС]
	Спрошу просто, в теории вообще можно ли сделать изменение значений в таблице? И просто создание таблицы с заданным в html кол-ом столбцов БЕЗ плагина? Добавлено через 17 часов 43 минуты Форум советчиков, подскажите как получить доступ к ячейкам таблицы ? 0