Question

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

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

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

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

Answer 2

这里是用于在表格中添加新行的纯JavaScript代码

 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>";

您可以参考http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow

在Tab键击中某个td后插入新的html行

2 个答案: