Динамическая таблица 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 в первой строке. Скорее всего, и во всей таблице

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

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа 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	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .