Создать 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" (по убыванию)

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 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-форму

Решение