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

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

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

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

HTML5

<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

function CreateEle() {
    
var row = document.getElementById("table");
var x = row.insertCell(0);
x.innerHTML = "New cell";
}

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

@j2FunOnly · 11.09.2017, 15:16

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

HTML5

<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

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

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

 
<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

<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

function createCell(row) {
  var newCell = row.insertCell(-1);
  newCell.className = 'created';
  setTimeout(function() {
    newCell.className = 'new';
  }, 100);
  setTimeout(function() {
    newCell.className = '';
  }, 500);
}

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

CSS

.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

// 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

function createColumn(table) {
  var rows = table.tBodies[0].rows;
  for (var i = 0, l = rows.length; i < l; i++) {
    createCell(rows[i]);
  }
}

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

Javascript

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

 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"

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

Решение

Решение

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

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

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

@j2FunOnly the hardway first 2461 / 1836 / 906 Регистрация: 05.06.2015 Сообщений: 3,603
	11.09.2017, 18:44	6
	Викторка, покажите код 0

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