Insert new html row after tab key hits certain td

Question

I use this code to get the td's editable How to make HTML table "Excel-like" editable for multiple cells, ie simultaneous copy-paste features?

Now I'm trying to add a new row as the tab key is entered on the last td.

FIDDLE

HTML:

<table width="100%" id="table" class="table" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td><div contenteditable>Some Text over here</div></td>
        <td><div contenteditable>Some Text over here</div></td>
        <td><div contenteditable>Some Text over here</div></td>
         <td><div contenteditable>Some Text over here</div></td>
    </tr>
    <tr>
        <td><div contenteditable>Some Text over here</div></td>
        <td><div contenteditable>Some Text over here</div></td>
        <td><div contenteditable>Some Text over here</div></td>
        <td><div contenteditable>Some Text over here</div></td>
    </tr>
</table>

Javscript:

function init()
{
    var tables = document.getElementsByClassName("table");
    var i;
    for (i = 0; i < tables.length; i++)
    {
        makeTableEditable(tables[i]);
    }
}

function makeTableEditable(table)
{
    var rows = table.rows;
    var r;
    for (r = 0; r < rows.length; r++)
    {
        var cols = rows[r].cells;
        var c;
        for (c = 0; c < cols.length; c++)
        {
            var cell = cols[c];
            var listener = makeEditListener(table, r, c);
            cell.addEventListener("input", listener, false);
        }
    }
}

function makeEditListener(table, row, col)
{
    return function(event)
    {
        var cell = getCellElement(table, row, col);
        var text = cell.innerHTML.replace(/<br>$/, '');
        var items = split(text);

        if (items.length === 1)
        {
            // Text is a single element, so do nothing.
            // Without this each keypress resets the focus.
            return;
        }

        var i;
        var r = row;
        var c = col;
        for (i = 0; i < items.length && r < table.rows.length; i++)
        {
            cell = getCellElement(table, r, c);
            cell.innerHTML = items[i]; // doesn't escape HTML

            c++;
            if (c === table.rows[r].cells.length)
            {
                r++;
                c = 0;
            }
        }
        cell.focus();
    };
}

function getCellElement(table, row, col)
{
    // assume each cell contains a div with the text
    return table.rows[row].cells[col].firstChild;
}

function split(str)
{
    // use comma and whitespace as delimiters
    return str.split(/,|\s|<br>/);
}

init();

    $('td:last-child div').keydown(function(e) {
    console.log('keyup called');
     var code = e.keyCode || e.which;
   if (code == '9') {
    // var table=document.getElementById("table");
     //table.insertRow(0);
       alert('Pressed');
   return false;
   }
});

The tab key works because it alerts as you tab after the last-child. But I dont know why the insertRow isn't working. Got it from here http://www.w3schools.com/jsref/met_table_insertrow.asp

Any help or suggestions will be appreciated!

Answer 1

use the focus event with a callback

$(document).ready(function(){
    $(document).on("focus",'#table tr:last-child td:last-child',function() {
        //append the new row here.
        var table = $("#table");
        table.append('<tr>\
        <td><div contenteditable>Some Text over here</div></td>\
        <td><div contenteditable>Some Text over here</div></td>\
        <td><div contenteditable>Some Text over here</div></td>\
        <td><div contenteditable>Some Text over here</div></td>\
        </tr>');
    });
});

the \\ are for doing multiline javascript strings.

Instead of doing a long string you could also do:

var row = jQuery('<tr></tr>');
var numCols = 4;
for(var i=0; i<numCols; i++) {
   var col = jQuery('<td></td>');
   var div = jQuery('<div contenteditable></div>');
   col.append(div);
   row.append(col);
}

Fiddle

JQuery focus api reference

Answer 2

Here the pure javascript code for adding a new row in table

 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);  
 cell1.innerHTML="<div contenteditable>Some Text over here</div>";
 cell2.innerHTML="<div contenteditable>Some Text over here</div>";
 cell3.innerHTML="<div contenteditable>Some Text over here</div>";
 cell4.innerHTML="<div contenteditable>Some Text over here</div>";  

You can refer http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow