How to add a new column to a table with an unspecified amount of rows with JavaScript

Question

I am trying to create a table that allows you to add a column that will match the amount of rows to the existing rows within the newly added column.

I'm only attaching the necessary HTML to the post.

<table id="main">
    <th class="head"><input type="text" placeholder="Enter Value"></th>
    <th class="head"><input type="text" placeholder="Enter Value"></th>
    <th class="head"><input type="text" placeholder="Enter Value"></th>
    <th class="head"><input type="text" placeholder="Enter Value"></th>
    <tr class="alt" id="row">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr class="alt">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr class="alt">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
</table>
<input type="button" value="Add New Row" onclick="addRow();" id="rowButton" />
<input type="button" value="Add New Column" onclick="addColumn();" />

And the JavaScript

function addRow() {
    var table = document.getElementById("main");
    var row = table.insertRow(7);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = '<input type="text" placeholder="Enter Value">';
    cell2.innerHTML = '<input type="text" placeholder="Enter Value">';
    cell3.innerHTML = '<input type="text" placeholder="Enter Value">';
    cell4.innerHTML = '<input type="text" placeholder="Enter Value">';
}

function addColumn() {
    var table = document.getElementById("row");
    var x = table.insertCell(-1);
    x.innerHTML = '<input type="text" placeholder="Enter Value">';
}

Answer 1

I added dynamic rows and column code to your code.

A table object will have its rows or trs as var rows = table.rows; and you can find out about its cells or tds as var cols = table.rows[xxx].cells;

function addRow() {
    var table = document.getElementById("main");
	var rws = table.rows;
	var cols = table.rows[0].cells.length;
    var row = table.insertRow(rws.length);
	var cell;
	for(var i=0;i<cols;i++){
		cell = row.insertCell(i);
		cell.innerHTML = '<input type="text" placeholder="Enter Value">';
	}
}

function addColumn() {
    var table = document.getElementById("main");
	var rws = table.rows;
	var cols = table.rows[0].cells.length;
	var cell;
	for(var i=0;i<rws.length;i++){
		cell = rws[i].insertCell(cols-1);
		cell.innerHTML = '<input type="text" placeholder="Enter Value">';
	}
}

<table id="main">
    <tr>
	<th class="head"><input type="text" placeholder="Enter Value"></th>
	<th class="head"><input type="text" placeholder="Enter Value"></th>
	<th class="head"><input type="text" placeholder="Enter Value"></th>
	<th class="head"><input type="text" placeholder="Enter Value"></th>
    </tr>
    <tr class="alt" id="row">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr class="alt">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr class="alt">
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
        <td><input type="text" placeholder="Enter Value"></td>
    </tr>
</table>
<input type="button" value="Add New Row" onclick="addRow();" id="rowButton" />
<input type="button" value="Add New Column" onclick="addColumn();" />

Answer 2

This should do it:

function myFunction() {
    var rows = document.getElementsByClassName("myRow");
    for(var i = 0; i < rows.length; i++){
       var x = rows[i].insertCell(-1);
       x.innerHTML = "New cell";
    }
}

The problem was that you were only working with an ID tag from 1 row, where you really need a class name that can identify every row.

Here's a working codepen:

http://codepen.io/anon/pen/aOgZrE