CODEWITHSUNDEEP
javascripthtmlhtml-table
Frank G.
Frank G.

Reputation: 1579

Add Rows and Cols to a HTML Table

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>

Upvotes: 0

Views: 201

Answers (4)

Munawir
Munawir

Reputation: 3356

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>

Upvotes: 1

Kishore Barik
Kishore Barik

Reputation: 770

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.

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68373

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>

Upvotes: 1

Pavel Slesinger
Pavel Slesinger

Reputation: 508

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--;
        }
    }
}

Upvotes: 0

Related Questions