Add Rows and Cols to a HTML Table

Question

I'm trying to figure out how to add a new row to a table using Javascript but I also need to be able to add 3 columns into this table and here is where I am having problems. I can't seem to get it to work. Here is the javascript:

This adds rows with first field being ID entered into the first row but I don't know how to fill in columns.

function myCreateFunction() {

var table = document.getElementById("myTable");
var add = 1;

for (var i = 0; i < add; i++) {

    var row = table.insertRow(2);
    var cell1 = row.insertCell(0);

    var div1 = document.createElement('div');
    div1.innerHTML = "ID";
    cell1.appendChild(div1);
    div1.contentEditable = true;

  }
  }

Here is my Table:

<table id="myTable">
  <tr> 
     <td>ID</td>
     <td>First Name</td>
     <td>Last Name</td>
     <td>Add More</td>
  </tr>
  <tr>
     <td>1</td>
     <td>Jelly</td>
     <td>Beans</td>
     <td><button onclick="myCreateFunction()">Create row</button>
    <button onclick="myDeleteFunction()">Delete row</button></td>
  </tr>
</table>

gurvinder372 · Accepted Answer · 2016-03-01 11:48:28Z

1

try this

function myCreateFunction(thisObj) {

   var buttonTr = thisObj.parentNode.parentNode;
   var buttonTrHTML = buttonTr.outerHTML;
   buttonTr.parentNode.removeChild(buttonTr); 
   var table = document.getElementById("myTable");
   var add = 1;
   for (var i = 0; i < add; i++) 
   {
      table.innerHTML += "<tr><td>ID</td> <td>First Name</td><td>Last Name</td> <td>Add More</td><tr>";   
   }
   //table.innerHTML += buttonTrHTML ;
   table.appendChild(buttonTr );

}

and you need to pass the current Obj as

<button onclick="myCreateFunction(this)">Create row</button>

edited Mar 1, 2016 at 11:48

answered Mar 1, 2016 at 10:11

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

3 Comments

Rayon Over a year ago

innerHTML += will destroy all attached events(not inline) if any..appendChild will be better approach..

Frank G. Over a year ago

Yes, Uncought Type Error: buttonTr.parentNode.removechild is not a function. Looks like something with this line buttonTr.parentNode.removechild(buttonTr);

gurvinder372 Over a year ago

@FrankG. Oh! C in the child should be in caps. buttonTr.parentNode.removeChild(buttonTr);

Munawir · Accepted Answer · 2016-03-01 13:08:30Z

Try this

function myCreateFunction() {

  var table = document.getElementById("myTable");
  var rows = table.rows.length;

  var row = table.insertRow(rows);
  
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);

  cell1.innerHTML = "ID";
  cell1.contentEditable = true;

  cell2.innerHTML = "First Name";
  cell2.contentEditable = true;

  cell3.innerHTML = "Last Name";
  cell3.contentEditable = true;
  
  var but1 = document.createElement('button');
  but1.innerHTML = "Create row";
  but1.setAttribute("onclick", "myCreateFunction()");
  cell4.appendChild(but1);

  var but2 = document.createElement('button');
  but2.innerHTML = "Delete row";
  but2.setAttribute("onclick", "myDeleteFunction()");
  cell4.appendChild(but2);
}

<table id="myTable">
  <tr> 
     <td>ID</td>
     <td>First Name</td>
     <td>Last Name</td>
     <td>Add More</td>
  </tr>
  <tr>
     <td>1</td>
     <td>Jelly</td>
     <td>Beans</td>
     <td><button onclick="myCreateFunction()">Create row</button><button onclick="myDeleteFunction()">Delete row</button></td>
  </tr>
</table>

Pavel Slesinger · Accepted Answer · 2016-03-01 10:12:23Z

0

I solved this a bit different. And it works fine (also with deleting rows):

function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var maxRows = 10;
if (rowCount < maxRows) {
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
  } else {
    alert("Max. Tabs= " + maxRows);
  }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for (var i = 0; i < rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if (chkbox != null && chkbox.checked == true) {
            if (rowCount <= 1) {
                alert("Min Tabs = 1");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

answered Mar 1, 2016 at 10:12

Pavel Slesinger

5083 silver badges12 bronze badges

2 Comments

Frank G. Over a year ago

No luck... I setup the button like this along with your function <button onclick="addRow(myTable)">Create row</button> but nothings happen. I also tried with as <button onclick="addRow()">Create row</button> nothing either.

Pavel Slesinger Over a year ago

The Only diffenrece left is that I have implemented the buttons via input: <input type="button" value="Add Tab" onClick="addRow('dataTable')" /> <input type="button" value="Remove Tab" onClick="deleteRow('dataTable')" /> you also can check my solution here: kleincodiert.at/articles/generator

Kishore Barik · Accepted Answer · 2016-03-01 12:39:14Z

Try following function

function myCreateFunction() {

var table = document.getElementById("myTable");
var rowCount = table.rows.length;
console.log(rowCount)
var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell1.innerHTML = rowCount;
cell2.innerHTML = ""; //put your text/html here
cell2.innerHTML = ""; //put your text/html here
}

put your desired text or html in innerHTML of the respected cell

Also for Pavel's answer your markup is wrong(though I haven't tested the function). The table id 'myTable' should be passed as string.

<button onclick="addRow('myTable')">Create row</button>

could not comment for not having enough reputation

Hope this helps.

Collectives™ on Stack Overflow

Add Rows and Cols to a HTML Table

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related