javascript - 在Tab键击中特定td之后插入新的html行

我使用此代码获取TD的可编辑How to make HTML table "Excel-like" editable for multiple cells, i.e. simultaneous copy-paste features?

现在，我尝试添加新行，因为在最后一个td上输入了tab键。

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>

字幕：

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

Tab键起作用的原因是，在您最后一个孩子之后，您在选择时会发出警报。但是我不知道为什么insertRow不起作用。从这里得到它http://www.w3schools.com/jsref/met_table_insertrow.asp

任何帮助或建议，将不胜感激！

最佳答案

将焦点事件与回调一起使用

$(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>');
    });
});

\用于执行多行javascript字符串。

除了做长字符串，您还可以这样做：

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

关于javascript - 在Tab键击中特定td之后插入新的html行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17879972/