このコードを使用して td を編集可能にする方法 HTML テーブルを「Excel のように」複数のセルに対して編集可能にする方法、つまり同時コピー/貼り付け機能は?
最後の td でタブ キーが入力されたため、新しい行を追加しようとしています。
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;
}
});
タブキーは、最後の子の後にタブを押すと警告するため機能します。しかし、insertRow が機能しない理由がわかりません。ここから入手しましたhttp://www.w3schools.com/jsref/met_table_insertrow.asp
ヘルプや提案をいただければ幸いです。