Stackoverflow Response: add rows to table dynamically and make content editable

http://stackoverflow.com/questions/16232554/add-rows-to-table-dynamically-and-make-content-editable/16233019#16233019

HTML

<table id="tableData"></table>

CSS

td:active {color: #ff0000}

JavaScript

var table = document.getElementById("tableData");
    
        var add = 5;
    
        for (var i = 0; i < add; i++) {
    
            var row = table.insertRow(0);
    
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            
            // Method 3 (All browsers)
            cell1.innerHTML = "<div contenteditable>Method 31</div>";
            cell2.innerHTML = "<div contenteditable>Method 32</div>";
            cell3.innerHTML = "<div contenteditable>Method 33</div>";
            cell4.innerHTML = "<div contenteditable>Method 34</div>";
            
        }