Создать HTML-форму

@kornelyk · Регистрация: 07.01.2012

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

Создать HTML-форму, которая выводит на экран таблицу с заданным количеством строк и столбцов. Заполнить таблицу случайными целыми числами от 0 до 100 и отсортировать их по столбцам по возрастанию. Хотя бы как создать эту таблицу???

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title></title>
</head>
<body>
<form name="f1" method="get" action="">
 
<p>Число строк  
<input type="text" name="a"  value="" size="25" >
</p>
<p>Число столбцов
<input type="text" name="b"  value="" size="25" >
</p>
<p><input type="button" name="ok"  value="Создать таблицу" >
</p>
</form>
</body>
</html>

@Lazy_Den · 11.12.2014, 19:22

Пример в песочнице

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function createTbl() {
    var body = document.getElementsByTagName('body')[0];
    var tbl = document.createElement('table');
    tbl.style.width = '100%';
    tbl.setAttribute('border', '1');
    var tbdy = document.createElement('tbody');
    for (var i = 0; i < f1.a.value; i++) {
        var tr = document.createElement('tr');
        for (var j = 0; j < f1.b.value; j++) {
            var td = document.createElement('td');
            td.appendChild(document.createTextNode('TD'));
            tr.appendChild(td);
        }
        tbdy.appendChild(tr);
    }
    tbl.appendChild(tbdy);
    body.appendChild(tbl);
}
f1.ok.addEventListener('click', createTbl, false);

Заполните уже сами. Там ничего сложного нет

Добавлено через 1 минуту
P.S. По желанию, можно еще использовать insertRow, insertCell

@kalabuni · 11.12.2014, 20:07

и зачем нам такой изврат -- var body = document.getElementsByTagName('body')[0]; ?
для всех тегов, которые должны быть в единственном экземпляре на странице, существуют прямые скриптовые ссылки, а именно:
для <!doctype> -- document.doctype
для <head> -- document.head
для <title> -- document.title
и, наконец, для <body> -- document.body

изврат номер два -- tbl.setAttribute('border', '1'); почему не простое tbl.border = 1;?

@Lazy_Den · 11.12.2014, 20:13

kalabuni, что поделать, когда на скорую руку что-то делаешь, то старые привычки иногда берут верх.

@GuardCat · 11.12.2014, 23:51

kalabuni, по первому пункту соглашусь с вами. По второму, смысл использования setAttribute есть. Как минимум, это хорошая привычка. Про разницу атрибутов и свойств все, наверное, знают. На всякий случай статья.

@Lazy_Den · 12.12.2014, 00:18

kalabuni, GuardCat, ох, мужики, что-то вы из всего этого трагедию начали делать. Это так принципиально важно? Например, для меня куда большей трагедией видеть такого рода "художества", но я молча прошёл мимо, т.к. мир из-за этого не рухнет.

@kalabuni · 12.12.2014, 01:38

Lazy_Den, и что там за "трагедия", не соблаговолите объяснить?

@Lazy_Den · 12.12.2014, 03:29

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

и что там за "трагедия", не соблаговолите объяснить?

Если вы считаете, что прописывать обработчики событий внутри тегов - это на сегодняшний день вполне нормально, то это как раз не трагедия. Трагедия в том, что к вам и с вашей репутацией прислушиваются новички. На w3.org очень коротко, но ясно дают понять, чем такой подход плох. Хотя, я думаю, что вы это и так знали, а вот новички - не знают и не известно, кто из них и когда образумится. А до тех пор, они могут подражать вам. И было бы это так же их личной проблемой, если не учесть, что их горе-коды (мягко сказал), потом попадают на "рихтование" таким, как я и вызывают бурю эмоций и совсем не положительных. Файлы css, js и т.п., придуманы не просто так. Или вы считаете, что смешать всё вместе с html, а может быть еще сверху и php приправить - это нормально? В принципе, я бы даже не рекомендовал использование обработчиков вида element.onevent = handler; , т.к. это, как минимум, ограничивает нас всего в одном обработчике на элементе и лишает управлением фазой перехвата события, а советовал бы использовать addEventListener(). Даже на известном многим ресурсе - это называется "Назначение обработчиков по стандарту", что в общем-то и есть таковым.

Добавлено через 4 минуты
P.S. И на всякий случай, холиварить я не намерен, т.к. у меня есть более интересные хобби. Вы попросили обосновать - я это вкратце сделал. На сим позвольте откланяться.

@kalabuni · 12.12.2014, 07:17

без холивара -- высказываю свою ТЗ на поднятый вами вопрос

существует ТРИ метода прописывания javascript-кода на HTML-страницах:
-- In-line: прописывание обработчиков событий внутри тегов
-- Embedded: прописывание кода в блоках <script></script>
-- External: подключение внешних js-файлов

эти методы абсолютно равноправны, среди них нет "более лучшего" и "более худшего"

свои особенности (как достоинства, так и недостатки) есть у каждого из трёх методов
какой именно метод в данном конкретном случае применить - решает программист

для примера: если на странице всего лишь у одного тега необходимо прописать коротенькую обработку какого-то одного события, то, ИМХО, только самый тупоголовый программист будет городить для этого внешний js-файл и подключать его к странице

аналогично и для правил стиля -- есть такие же ТРИ метода, которые тоже абсолютно равноправны (и дело верстальщика решить - какой из методов в каждом конкретном случае оптимальнее использовать):
-- внутри тегов в их атрибутах style
-- внедрённый в блоках <style></style>
-- внешние подключаемые css-файлы

@kornelyk · 12.12.2014, 09:57 **[ТС]**

а отсортировать по столбцам и по возрастанию как можно?

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
<html>
<head>
<title></title>
</head>
<body>
<form name="f1" method="get" action="">
<p>Число строк 
<input type="text" name="a" value="" size="25" id="v1" >
</p>
<p>Число столбцов
<input type="text" name="b" value="" size="25" id="v2" >
</p>
<p><input type="button" onclick="create_table()" name="ok" value="Создать таблицу" >
</p>
<table id='table'></table>
</form>
<script type="text/javascript"> 
function createTbl() {
var body = document.getElementsByTagName('body')[0];
var tbl = document.createElement('table');
tbl.style.width = '50%';
tbl.setAttribute('border', '2');
var tbdy = document.createElement('tbody');
for (var i = 0; i < f1.a.value; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < f1.b.value; j++) {
var td = document.createElement('td');
td.appendChild( document.createTextNode(Math.floor(Math.random()*100)));
tr.appendChild(td);
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl);
}
f1.ok.addEventListener('click', createTbl, false);
</script> 
</body>
</html>

@Lazy_Den · 12.12.2014, 13:12

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

а отсортировать по столбцам и по возрастанию как можно?

Тестируем тут

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
function createTbl() {
    var tbl = document.createElement('table');
    tbl.style.width = '50%';
    tbl.setAttribute('border', '2');
    var tbdy = document.createElement('tbody');
    for (var i = 0; i < f1.a.value; i++) {
        var tr = document.createElement('tr');
        for (var j = 0; j < f1.b.value; j++) {
            var td = document.createElement('td');
            td.appendChild(document.createTextNode(Math.floor(Math.random() * 100)));
            tr.appendChild(td);
        }
        tbdy.appendChild(tr);
    }
    tbl.appendChild(tbdy);
    document.body.appendChild(tbl);
    /* 
     * сортировка по первому столбцу
     * сделал с пятисекундной задержкой для лучшего восприятия
     */
    setTimeout(function () {
        sortTable(tbl, 0, 1);
    }, 5000);
}
 
function sortTable(tbl, col, asc) {
    var tbody = tbl.tBodies[0],
        rows = tbody.rows,
        rlen = rows.length,
        arr = [],
        i, j, cells, clen;
    for (i = 0; i < rlen; i++) {
        cells = rows[i].cells;
        clen = cells.length;
        arr[i] = [];
        for (j = 0; j < clen; j++) {
            arr[i][j] = cells[j].innerHTML;
        }
    }
    arr.sort(function (a, b) {
        return (+a[col] == +b[col]) ? 0 : ((+a[col] > +b[col]) ? asc : -1 * asc);
    });
    for (i = 0; i < rlen; i++) {
        arr[i] = "<td>" + arr[i].join("</td><td>") + "</td>";
    }
    tbody.innerHTML = "<tr>" + arr.join("</tr><tr>") + "</tr>";
}
f1.ok.addEventListener('click', createTbl, false);

sortTable(tbl, 0, 1);: первый параметр, собсна, сама таблица, второй - индекс колонки, по которой сортируем, третий - сортировка, "1" (по возрастанию) или "-1" (по убыванию)

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	11.12.2014, 20:07
	и зачем нам такой изврат -- var body = document.getElementsByTagName('body')[0]; ? для всех тегов, которые должны быть в единственном экземпляре на странице, существуют прямые скриптовые ссылки, а именно: для <!doctype> -- document.doctype для <head> -- document.head для <title> -- document.title и, наконец, для <body> -- document.body изврат номер два -- tbl.setAttribute('border', '1'); почему не простое tbl.border = 1;? 1

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	11.12.2014, 20:13
	kalabuni, что поделать, когда на скорую руку что-то делаешь, то старые привычки иногда берут верх. 0

@GuardCat Просто любитель 626 / 464 / 120 Регистрация: 20.01.2011 Сообщений: 865 Записей в блоге: 2
	11.12.2014, 23:51
	kalabuni, по первому пункту соглашусь с вами. По второму, смысл использования setAttribute есть. Как минимум, это хорошая привычка. Про разницу атрибутов и свойств все, наверное, знают. На всякий случай статья. 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	12.12.2014, 00:18
	kalabuni, GuardCat, ох, мужики, что-то вы из всего этого трагедию начали делать. Это так принципиально важно? Например, для меня куда большей трагедией видеть такого рода "художества", но я молча прошёл мимо, т.к. мир из-за этого не рухнет. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	12.12.2014, 01:38
	Lazy_Den, и что там за "трагедия", не соблаговолите объяснить? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	12.12.2014, 07:17
	без холивара -- высказываю свою ТЗ на поднятый вами вопрос существует ТРИ метода прописывания javascript-кода на HTML-страницах: -- In-line: прописывание обработчиков событий внутри тегов -- Embedded: прописывание кода в блоках <script></script> -- External: подключение внешних js-файлов эти методы абсолютно равноправны, среди них нет "более лучшего" и "более худшего" свои особенности (как достоинства, так и недостатки) есть у каждого из трёх методов какой именно метод в данном конкретном случае применить - решает программист для примера: если на странице всего лишь у одного тега необходимо прописать коротенькую обработку какого-то одного события, то, ИМХО, только самый тупоголовый программист будет городить для этого внешний js-файл и подключать его к странице аналогично и для правил стиля -- есть такие же ТРИ метода, которые тоже абсолютно равноправны (и дело верстальщика решить - какой из методов в каждом конкретном случае оптимальнее использовать): -- внутри тегов в их атрибутах style -- внедрённый в блоках <style></style> -- внешние подключаемые css-файлы 0

Создать HTML-форму

Решение