ASP.NETでExcelを適用:(9)表の自動成長を実現
ユーザーがExcelシートを編集するときに、編集中のセルでEnterまたはDown Keyを押すと、編集フォーカスが自動的に下にスクロールします.もちろんExcel自体は256 X 65535のスペースを持っているので、これは珍しいことではありません.私たちのHTMLテーブルでこのような機能を実現するには、Excelに似ています.そして、このような簡単な機能は、花を添えない理由はありません.ユーザーが私たちの表を使ってデータを編集し、最後の行に来て、入力して、車を押すと、表は自動的に1行増えて、最後の列に来て、右ボタンを押して、表は自動的に1列増えて、このような機能はクールではありませんか?
HTMLテーブルは半静的なので、新しい行と列を動的に追加する必要があります.
現在のセルが編集されていることを示す要素が現在の入力フォーカスであるため、この要素のonkeydownイベントに引き続き記事を書きます.
すべての行の最大列数を記録する必要があります.新しい行を追加すると、その列数は最大列数(行番号の列もある)に等しいはずです.
HTMLテーブルは半静的なので、新しい行と列を動的に追加する必要があります.
現在のセルが編集されていることを示す要素が現在の入力フォーカスであるため、この要素のonkeydownイベントに引き続き記事を書きます.
function onTextBoxKeydown()
{
....
switch(code)
{
case 39: // right
{
....
// ,
}
break;
case 13: // carriage return
case 40: // down
{
sender.onchange();
if ( row < tbl.rows.length - 1 )
tbl.rows[row + 1].cells[col].onactivate();
else //
{
var newrow = tbl.insertRow(-1); //
//
// :
for(var i = 0; i < tbl.rows[row].cells.length; i++ )
{
var cell = newrow.insertCell(i); //
//
cell.style.backgroundColor = tbl.rows[row].cells[i].style.backgroundColor;
cell.style.posWidth = tbl.rows[row].cells[i].style.posWidth;
cell.style.posHeight = tbl.rows[row].cells[i].style.posHeight;
cell.style.borderLeft = '1px solid black';
cell.style.borderBottom = '1px solid black';
if ( i == 0 ) //
{
cell.align = 'center'; //
cell.innerHTML = row + 1; //
}
else
{ //
cell.hasFormula = false;
cell.formula = '';
cell.dataField = '';
cell.innerHTML = ' ';
cell.onactivate = onCellActivate;
cell.ondeactivate = onCellDeactivate;
if ( i == tbl.rows[row].cells.length - 1) // ,
{
cell.style.borderRight = '1px solid black';
}
}
}
}
return false;
}
break;
....
すべての行の最大列数を記録する必要があります.新しい行を追加すると、その列数は最大列数(行番号の列もある)に等しいはずです.