1

我使用此代码获取 td 的可编辑性 如何使 HTML 表格“类似 Excel”可编辑多个单元格，即同时复制粘贴功能？

现在我正在尝试添加一个新行，因为在最后一个 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>

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

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

4

2 回答 2

2

使用带有回调的焦点事件

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

小提琴

jQuery焦点api参考

于 2013-07-26T11:23:22.827 回答
0

这里是用于在表中添加新行的纯 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

于 2013-07-26T11:37:36.373 回答