javascript - Tab 键点击特定 td 后插入新的 html 行

Question

我使用此代码来获取 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>

JavaScript:

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 键之所以有效，是因为当您在最后一个子项之后按 Tab 键时，它会发出警报。但我不知道为什么 insertRow 不起作用。从这里得到的http://www.w3schools.com/jsref/met_table_insertrow.asp

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

Answer 1

使用带有回调的焦点事件

$(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