Динамическая таблица javascript

@dmmih · Регистрация: 21.12.2012

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

Требуется создать динамическую таблицу. Вначале в поле ввода количества столбцов и строк мы вводим нужное их количество. По нажатию кнопки создаётся таблица заданного размера.
Необходимо таблицу заполнить случайными числами в пределах от 0 до 100.
А затем по столбцам отсортировать её в порядке возрастания.
Вот исходный код на данный момент. Пока что только создаётся таблица по нажатию кнопки:

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
<script type="text/javascript" language="javascript">
 
nrow=0;//количество строк по умолчанию
ncells=0;//количество столбцов по умолчанию
 
//Проверяем: удалить или добавить строку?
function change_tr() { 
rows = document.getElementById("rows");
 
 if(rows.value-nrow>0)
    {addrow();}
         else {
             if(rows.value>=0)
                {delrow();}}} 
 
//функция добавления строк
function addrow() {
rows = document.getElementById("rows");
ecells=document.getElementById("ecells");
 
        for(i=0;i<rows.value-nrow;i++)
           {var newrow = mytable.insertRow(0);
                for(k=0;k<ecells.value;k++)
                   {newrow.insertCell(0).innerHTML = "<input type='text' value=' 'size='4'>";}}
                       nrow=rows.value;}
 
//функция удаления строк
function delrow() {
var rows = document.getElementById("rows");
var lastrowindex=mytable.rows.length-1;
 
      for(i=0;i<Math.abs(nrow-rows.value);i++) {
          mytable.deleteRow(lastrowindex);
              lastrowindex=lastrowindex-1;}
nrow=rows.value;} 
 
//Проверяем:добавить или удалить столбцы?
function change_cells() {
var ecells = document.getElementById("ecells");
 
         if(ecells.value-ncells>0){
        addcells();}
                  else {
                    if(ecells.value>=0)
                        {delcells();}}}
 
//добавление столбцов
function addcells() {
var ecells = document.getElementById("ecells");
 
         for(i=0;i<mytable.rows.length;i++){
             rowname=mytable.rows[i];
                    for(e=0;e<Math.abs(ecells.value-ncells);e++){
                         rowname.insertCell(0).innerHTML = "<input type='text' value=' 'size='4'>";}}
                                  ncells=ecells.value;}
 
//удаление столбцов
function delcells() {
var ecells = document.getElementById("ecells");
 
       for(i=0;i<mytable.rows.length;i++){
           rowname=mytable.rows[i];
               for(e=0;e<Math.abs(ecells.value-ncells);e++){
                    rowname.deleteCell(0);}}
                           ncells=ecells.value;}
 
//формирование итоговой таблицы и кода
function get_result() {
var inputnum=document.getElementsByTagName("input");
var inindex=1;
rows=document.getElementById("rows");
ecells=document.getElementById("ecells");
 
//формирование тела таблицы
for(x=0;x<rows.value-1;x++)
  {bodyt=bodyt+"<tr>";
     for(n=0;n<ecells.value;n++)
        {bodyt=bodyt+"<td>"+inputnum[inindex].value+"</td>";
             "</table>";}}
 
document.getElementById("result").innerHTML=bodyt;
document.getElementById("itog_code").innerHTML="<textarea cols=100 rows=10 readonly>"+bodyt+"</textarea>";}
 
</script>
</head> 
 
<body>
<div id="content">
<table>
<tr><td>Количество строк:</td><td>
<input type="text"name="rows"id="rows"size="20" onchange="change_tr()" value="0"></td></tr>
 
<tr><td>Количество столбцов:</td><td>
<input type="text"id="ecells"name="ecells"size="20" onchange="change_cells()" value="0"></td></tr>
</table>
 
<form> <input type="button" value="Нажмите здесь" name="buttonl" id="buttonl" onClick="mytable"/>
<table id="my_table"name="my_table"cellpadding="2">
<thead>
</thead>
<tbody>
</tbody>
</table>
 
<script>
//установка значений по умолчанию в полях при перезагрузке страницы
document.getElementById("rows").value=0;
document.getElementById("ecells").value=0;
 
//установка всех других значений переменных при загрузке страницы или ее перезагрузке
mytable = document.getElementById("my_table");
</script>

Не получается рандомно заполнить таблицу числами, следственно о сортировке не может быть и речи.
Пытался записать количество полученных столбцов и строк в новые переменные, а потом по циклу проходить по ячейкам таблицы используя Math.floor(Math.random() * (100)).
Но ничего из этого не получилось. Изучаю яваскрипт совсем немного.
Прошу помочь вас со скриптом. Объяснить подробно действия дальнейшие.
На этом сайте можно проверить код:
http://delaisait.ucoz.ru/blog/... -12-15-386
Спасибо за внимание!

@philin · 14.12.2013, 23:29

Можно вот как поступить: просто выдрать все <td> из таблицы и записать в цикле каждому значение.

JavaScript
1
2
3
4
// сначала получаем саму таблицу, а в ней уже ищем потомки td
var td_list = document.getEmelentById("my_table").getElementsByTagName("td");
for (var i=0, l=td_list.length; i<l; i++) // для каждого найденного td
    td_list[i].innerHTML = Math.floor(Math.random()*100);

Хранить кол-во строк и столбцов не нужно, их всегда можно найти. К примеру:

JavaScript
1
2
3
4
var tr_list = document.getEmelentById("my_table").getElementsByTagName("tr");
tr_list.length; // тут кол-во всех tr в таблице - строк
var first_line_td_list = tr_list[0].getElementsByTagName("tr"); // взяли первый tr и нашли в нем все td
first_line_td_list.length; // тут кол-во всех td в первой строке. Скорее всего, и во всей таблице

Да, такое сгодится только если нет вложенных таблиц. Тогда нужно искать не просто всех потомков, а только прямых

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .