Добавление столбца таблицы при клике на кнопку

@Викторка · Регистрация: 23.02.2013

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

Ребята, помогите. как добавить строку я разобралась, а вот что касается столбца не получается. имеется такой код HTML

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table id="table">
<div class="addcolumn">
        <button id="addColumn" onClick="CreateEle()"><p>+</p></button>
 </div>
 
                       <tr>
            <th></th><th></th><th></th><th></th> 
 
            </tr>
            <tr> 
                <td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td>
            </tr>
    
</table>

Нужно по нажатию на кнопку добавить столбец.

JavaScript
1
2
3
4
5
6
function CreateEle() {
    
var row = document.getElementById("table");
var x = row.insertCell(0);
x.innerHTML = "New cell";
}

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

@j2FunOnly · 11.09.2017, 15:16

Викторка, чтобы добавить столбец надо добавить ячейку каждой строке.

HTML5
1
2
3
4
5
6
<table class="table">
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
</table>
<button type="button" class="btn add-col">Add column</button>

JavaScript
1
2
3
4
5
6
7
var table = document.querySelector('table.table');
document.querySelector('button.add-col').onclick = function () {
  var rows = table.tBodies[0].rows;
  for(var i = 0, l = rows.length; i < l; i++) {
    rows[i].insertCell(-1);
  }
}

https://jsfiddle.net/j2FunOnly/wgqLbgv5/

@Викторка · 11.09.2017, 16:46 **[ТС]**

j2FunOnly, спасибо. Вы крутой))
но у меня теперь другая проблема. выдает ошибку и пишет, что "cannot set property 'onclick' of null" . что ему не нравится??

@j2FunOnly · 11.09.2017, 17:16

Викторка, вы скрипт вставляете в head и он выполняется когда кнопки еще нет в документе. поместите перед закрывающим тэгом body.

@Викторка · 11.09.2017, 18:18 **[ТС]**

j2FunOnly, спасибо помогло!
У меня появилась новая проблема. При добавление строк и столбцов, образуется пустое пространство.
Вы не подскажите как его заполнить теми же строками или столбцами? Буду Вам признательна!

@j2FunOnly · 11.09.2017, 18:44

Викторка, покажите код

@Викторка · 11.09.2017, 18:57 **[ТС]**

j2FunOnly,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function CreateForm() {
    document.querySelector('table').innerHTML+='<table border="1"><tr><td></td><td></td><td></td><td></td></tr></table>';
}
 
var table = document.querySelector('table');
document.querySelector('button.add-col').onclick = function() {
  var rows = table.tBodies[0].rows;
  for (var i = 0, l = rows.length; i < l; i++) {
    var newCell = rows[i].insertCell(-1);
    newCell.className = 'new';
    }
}

HTML5
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
 
<table class="table">
<div class="addcolumn">
        <button id="addColumn" onClick="CreateElement()" type="button" class="button add-col"><p style="color: white;
    font-size:20px;">+</p></button>
 </div>
                        <tr>
            <td></td><td></td><td></td><td></td> 
 
            </tr>
            <tr> 
                <td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td>
            </tr>
    
</table>
 
<div class="addLine">
        <button id="addLine" onClick="CreateForm()"><p style="color: white;
    font-size:20px;">+</p></button>
 </div>

@j2FunOnly · 11.09.2017, 23:16

Викторка, всё не так. Вы создаете таблицу в таблице. Классы и id в HTML задаются в стиле kebab-case, потому что. Имена функций и переменных в JS задаются в стиле camelCase. Стили вынести в CSS. ~~Inline-обработчики...~~

Причешем разметку. Зачем вам параграф в кнопке?!

HTML5
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
<table class="table">
  <!-- div class="addcolumn" -->
  <div class="add-column">
    <!-- button id="addColumn" onClick="CreateElement()" type="button" class="button add-col" -->
    <button id="add-column" type="button" class="button add-col">
      <!-- p style="color: white;font-size:20px;" -->
      +
      <!-- /p -->
    </button>
  </div>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<!-- div class="addLine" -->
<div class="add-row">
  <!-- button id="addLine" onClick="CreateForm()" -->
  <button id="add-row" class="button">
    <!-- p style="color: white; font-size:20px;" -->
    +
    <!-- /p -->
  </button>
</div>

Сначала научимся создавать ячейку в строке. С анимацией, CSS нам в помощь

JavaScript
1
2
3
4
5
6
7
8
9
10
function createCell(row) {
  var newCell = row.insertCell(-1);
  newCell.className = 'created';
  setTimeout(function() {
    newCell.className = 'new';
  }, 100);
  setTimeout(function() {
    newCell.className = '';
  }, 500);
}

А вот и стили подъехали

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.button {
  color: white;
  font-size: 20px;
}
 
td {
  border: 1px solid black;
  transition: background-color .5s, border-color .2s;
  width: 10px;
  height: 10px;
}
 
td.created {
  border-color: transparent;
}
 
td.new {
  border: 1px solid green;
  background-color: #b3ffb3;
}

Создаем строку

JavaScript
1
2
3
4
5
6
7
8
9
// function CreateForm() {
function createRow(table) {
  // document.querySelector('table').innerHTML += '<table border="1"><tr><td></td><td></td><td></td><td></td></tr></table>';
  var newRow = table.insertRow(-1);
  var colsLength = table.tBodies[0].rows[0].cells.length;
  for (var i = 0; i < colsLength; i++) {
    createCell(newRow);
  }
}

Создаем столбец

JavaScript
1
2
3
4
5
6
function createColumn(table) {
  var rows = table.tBodies[0].rows;
  for (var i = 0, l = rows.length; i < l; i++) {
    createCell(rows[i]);
  }
}

И вешаем на кнопочки наши функции

JavaScript
1
2
3
4
5
6
7
8
9
document.addEventListener('DOMContentLoaded', function() {
  var table = document.querySelector('table.table');
  document.querySelector('#add-column').onclick = function() {
    createColumn(table);
  }
  document.querySelector('#add-row').onclick = function() {
    createRow(table);
  }
});

https://jsfiddle.net/j2FunOnly/qm555n5v/

@Викторка · 12.09.2017, 10:09 **[ТС]**

j2FunOnly, аааааааААА. СПАСИБО. оооочень помогли!!!

@Викторка · 15.09.2017, 17:14 **[ТС]**

j2FunOnly, Простите, но мне снова нужна Ваша помощь. проблема с удалением столбцов. Есть также две кнопки, но у них задача удалять строки и столбцы. как при нажатие удалить строки я разобралось, а вот со столбцами пишет мне ошибку. возможно я и во все не правильно написала для него код.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 function deleteLine() {
    document.querySelector('table').deleteRow(0);
}
 
 function deleteCell() {
   document.querySelector('table').deleteColumn(0);
    var row = document.getElementById("deleteColumn");
row.deleteCell(0);
}
 
  document.addEventListener('DOMContentLoaded', function() {
  var table = document.querySelector('table.table');
  document.querySelector('#deleteColumn').onclick = function() {
    deleteColumn(table);
  }
  document.querySelector('#deleteLine').onclick = function() {
    deleteLine(table);
  }
});

deleteColumn - удалить столбец,
deleteLine - удалить строку
буду признательно если поможете разобраться.
а ошибки при удаление столбца пишет такую "deleteColumn is not a function"

Новые блоги и статьи Все статьи Все блоги /
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .

Добавление столбца таблицы при клике на кнопку

Решение

Решение

@Викторка -9 / 0 / 0 Регистрация: 23.02.2013 Сообщений: 86
	11.09.2017, 16:46 [ТС]
	j2FunOnly, спасибо. Вы крутой)) но у меня теперь другая проблема. выдает ошибку и пишет, что "cannot set property 'onclick' of null" . что ему не нравится?? Миниатюры 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	11.09.2017, 17:16
	Викторка, вы скрипт вставляете в head и он выполняется когда кнопки еще нет в документе. поместите перед закрывающим тэгом body. 1

@Викторка -9 / 0 / 0 Регистрация: 23.02.2013 Сообщений: 86
	11.09.2017, 18:18 [ТС]
	j2FunOnly, спасибо помогло! У меня появилась новая проблема. При добавление строк и столбцов, образуется пустое пространство. Вы не подскажите как его заполнить теми же строками или столбцами? Буду Вам признательна! Миниатюры 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	11.09.2017, 18:44
	Викторка, покажите код 0

@Викторка -9 / 0 / 0 Регистрация: 23.02.2013 Сообщений: 86
	12.09.2017, 10:09 [ТС]
	j2FunOnly, аааааааААА. СПАСИБО. оооочень помогли!!! 0