ASP.NETでExcelを適用:(9)表の自動成長を実現


ユーザーがExcelシートを編集するときに、編集中のセルでEnterまたはDown Keyを押すと、編集フォーカスが自動的に下にスクロールします.もちろんExcel自体は256 X 65535のスペースを持っているので、これは珍しいことではありません.私たちのHTMLテーブルでこのような機能を実現するには、Excelに似ています.そして、このような簡単な機能は、花を添えない理由はありません.ユーザーが私たちの表を使ってデータを編集し、最後の行に来て、入力して、車を押すと、表は自動的に1行増えて、最後の列に来て、右ボタンを押して、表は自動的に1列増えて、このような機能はクールではありませんか?
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;
            ....

すべての行の最大列数を記録する必要があります.新しい行を追加すると、その列数は最大列数(行番号の列もある)に等しいはずです.