Add rows and columns to the table on click with javascript

Question

I am completely new to JavaScript, so, sorry for asking this simple question. The point is that there have been numerous similar questions here and on other platforms. I've tried all solutions provided but neither of them worked in my case. I assume that this is because of my CSS, otherwise I do not know what is the reason. I tried different methods: insertRow, clone etc. neither of them worked.

The point is that my program needs to add row or column to the table on click on the buttons. Right button should add column to the right of the table, bottom button should add row to the bottom of the table.

// append row to the HTML table
function appendRow() {
  var tbl = document.getElementById('my-table'), // table reference
    row = tbl.insertRow(tbl.rows.length), // append table row
    i;
  // insert table cells to the new row
  for (i = 0; i < tbl.rows[0].cells.length; i++) {
    createCell(row.insertCell(i), i, 'row');
  }
};

// create DIV element and append to the table cell
function createCell(cell) {
  var div = document.createElement('div'), // create DIV element        
    cell.appendChild(div); // append DIV to the table cell
};

// append column to the HTML table
function appendColumn() {
  var tbl = document.getElementById('my-table'), // table reference
    i;
  // open loop for each row and append cell
  for (i = 0; i < tbl.rows.length; i++) {
    createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
  }
};

#canvas {
  align-content: center;
  height: 1000px;
}

#my-table {
  margin: 0 -2px -2px 0;
  border: #FFF;
  border: 1px solid rgb(72, 170, 230);
  display: inline-block;
}

tr {
  background: rgb(72, 170, 230);
}

td {
  width: 50px;
  height: 50px;
}

.add {
  height: 52px;
  width: 52px;
  background: rgb(243, 165, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}

#addColumn {
  display: inline-block;
  vertical-align: top;
  margin: 2px 0 0 0;
}

.add:hover {
  background: rgb(246, 192, 82);
}

#addColumnChild {
  line-height: 50px;
}

#addRow {
  vertical-align: bottom;
  margin: 0 0 0 2px;
}

#addRowChild {
  line-height: 50px;
}

.del {
  height: 52px;
  width: 52px;
  background: rgb(178, 0, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}

#delColumn {
  display: inline-block;
  vertical-align: top;
  margin: 2px 0 0 0;
}

.del:hover {
  background: rgb(202, 76, 73);
}

#delColumnChild {
  line-height: 50px;
}

#delRow {
  vertical-align: left;
  margin: 0 0 0 2px;
}

#delRowChild {
  line-height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Test task 1</title>

<body>
  <!-- <div id="delColumn" class="del" onclick="appendColumn">
          <div id="addColumnChild"><b>–</b></div>
        </div>
         <div id="delRow" class="del" onclick="appendRow()">
          <div id="delRowChild"><b>–</b></div>
        </div>-->

  <table id="my-table">
    <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 id="addColumn" class="add" onclick="appendColumn">
    <div id="addColumnChild"><b>+</b></div>
  </div>
  <div id="addRow" class="add" onclick="appendRow()">
    <div id="addRowChild"><b>+</b></div>
  </div>

How to make buttons work and actually add rows and columns?

Welcome to Stack Overflow. The way this site works is that you post the code that you are working with and a specific question about the problem you are having. You do not have any JavaScript in your question, which means that you don't have a specific question, you are really looking for a tutorial on how JavaScript works with HTML and that's not what Stack Overflow is for. You should start by learning about JavaScript and the Document Object Model (DOM). Google and YouTube can be very helpful with that. — Scott Marcus
– Scott Marcus, Commented Aug 27, 2017 at 17:21
@mayua . Are you looking for vanilla JavaScript solution? If I provide solution with jQuery will be fine? — Shiladitya
– Shiladitya, Commented Aug 27, 2017 at 17:22
Why are you showing us your HTML and CSS, when the issue is with your jQuery? I could see your jQuery in your fiddle and its commented out, so please provide us with the code you have attempted and we may be able to help — FluffyKitten
– FluffyKitten, Commented Aug 27, 2017 at 17:23
@ScottMarcus Well, they did have their jQuery in the fiddle they linked to, that you removed in your edit.... — FluffyKitten
– FluffyKitten, Commented Aug 27, 2017 at 17:24
@ScottMarcus Please read my comment - I said it was in the JSFiddle link that you deleted from their question: jsfiddle.net/mozghovyi/gmzqe5kw/8 Yes, they should include it here too as I said in my comment, but please add back the link they provided. — FluffyKitten
– FluffyKitten, Commented Aug 27, 2017 at 17:28

Shiladitya · Accepted Answer · 2017-08-28 03:14:46Z

2

Here you go with a solution (using jQuery) https://jsfiddle.net/gmzqe5kw/11/

$('#addColumnChild').click(function(){
   $('#my-table tr').each(function(){
      $(this).append(`<td></td>`);
   });
});

$('#addRowChild').click(function(){
   $('#my-table tbody').append(`<tr>${$('#default-row').html()}</tr>`);
});

#canvas {
  align-content: center;
  height: 1000px;
}

#my-table {
  margin: 0 -2px -2px 0;
  border: #FFF;
  border: 1px solid rgb(72, 170, 230);
  display: inline-block;
}

tr {
  background: rgb(72, 170, 230);
}

td {
  width: 50px;
  height: 50px;
}

.add {
  height: 52px;
  width: 52px;
  background: rgb(243, 165, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}

#addColumn {
  display: inline-block;
  vertical-align: top;
  margin: 2px 0 0 0;
}

.add:hover {
  background: rgb(246, 192, 82);
}

#addColumnChild {
  line-height: 50px;
}

#addRow {
  vertical-align: bottom;
  margin: 0 0 0 2px;
}

#addRowChild {
  line-height: 50px;
}

.del {
  height: 52px;
  width: 52px;
  background: rgb(178, 0, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}

#delColumn {
  display: inline-block;
  vertical-align: top;
  margin: 2px 0 0 0;
}

.del:hover {
  background: rgb(202, 76, 73);
}

#delColumnChild {
  line-height: 50px;
}

#delRow {
  vertical-align: left;
  margin: 0 0 0 2px;
}

#delRowChild {
  line-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
  <tr id="default-row">
    <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 id="addColumn" class="add">
  <div id="addColumnChild"><b>+</b></div>
</div>
<div id="addRow" class="add">
  <div id="addRowChild"><b>+</b></div>
</div>

Hope this will help you.

answered Aug 28, 2017 at 3:14

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mayua Over a year ago

BUT! Do you have any idea why it does not work if I copy the code into another fiddle?

mayua Over a year ago

For example here: the same code but it does not work: jsfiddle.net/mozghovyi/cLmamo80 :(

Shiladitya Over a year ago

You are missing jQuery library, please add jQuery in your project as well as in the jsfiddle.

Shiladitya Over a year ago

Add this to the head section of your appilication <script type="javascript/text" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" ></script>

mayua Over a year ago

Thank you! I've added JQuery and it works now! I've accepted the answer and tried to up vote but it says that I can not up vote because my reputation is not high enough. Can I ask some moderator to do this for me? Sorry for the inconvenience...

|

Kamran · Accepted Answer · 2017-08-28 13:41:47Z

0

Use jQuery events and selectors:

As an example, to add a row, use general solution is of this form:

$(".some_selector").click(function () {
    $("table.your_class").append("<tr> <td>col1</td> <td>col2</td> </tr>");
});

To add columns use:

similarly to add columns:

$(".some_selector").click(function () {
    // Loop over the rows of the table and append the td tag
    $("table.your_class tr").append("<td>col1</td>");
});

edited Aug 28, 2017 at 13:41

answered Aug 27, 2017 at 18:26

Kamran

8531 gold badge8 silver badges20 bronze badges

2 Comments

mayua Over a year ago

Kamran, thank you for the suggestion, I do not think it will work here. I can not use a fixed html inside append because I need to add columns and rows and your suggestion will add the same quantity of cells in the row. Or I am mistaken?

Kamran Over a year ago

You should look at a tutorial such as tutorialrepublic.com/…

Collectives™ on Stack Overflow

Add rows and columns to the table on click with javascript

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related