7

table 要素を div 要素内に配置し、div のプロパティを width、height、overflow:auto; のように設定すると、テーブルの td 内にいくつかの入力要素を配置します。タブで移動するよりもスクロールがタブで移動しないことがわかりました（入力要素にデータが含まれている場合）。この問題は Chrome でのみ発生し、他の最新のブラウザーでは発生しません。サンプルコードは次のとおりです。

<div style="overflow: auto; height: 100px;width:400px;">
        <table >
            <tbody>
            <tr>
                <td style="width:100px;"><input value="1" type="text"/></td>
                <td style="width:100px;"><input value="2" type="text"/></td>
                <td style="width:100px;"><input value="3" type="text"/></td>
                <td style="width:100px;"><input value="4" type="text"/></td>
                <td style="width:100px;"><input value="5" type="text"/></td>
                <td style="width:100px;"><input value="6" type="text"/></td>
                <td style="width:100px;"><input value="7" type="text"/></td>
                <td style="width:100px;"><input value="8" type="text"/></td>
                <td style="width:100px;"><input value="9" type="text"/></td>
            </tr>
            </tbody>
        </table>

</div>

plunker にもリンクを作成しました。

http://plnkr.co/edit/1l8HftcoDlebywQ8LDos?p=preview

http://embed.plnkr.co/1l8HftcoDlebywQ8LDos/preview

これに関するヘルプは非常に高く評価されます。

4

2 に答える 2

1

Windows 8 の場合

Chrome: TABKEY でスクロールしても、tbody ビューポートの外側の行が正しく表示されません。

バージョン 39.0.2171.95 バージョン 41.0.2257.0 カナリア (64 ビット) バージョン 41.0.2236.0 (64 ビット)

IE 11 Firefox 31.0 で正しく動作します

これにより、最新の Chrome と IE11 でテストされた私のソリューション

        // rowObj is javascript <tr> element object
        rowObj.addEventListener("focus", function( event ) {
        console.log("focus visible row=" + event.currentTarget.sectionRowIndex);
        if(event.currentTarget.sectionRowIndex === 0)
            detObj.scrollTop = 0;                      //detObj is javascript <td>
        else
        if(event.currentTarget.sectionRowIndex > 4)    // is the max visible rows in <tbody>
            detObj.scrollTop = 9999;                   // will focus on last row in <tbody>
    }, true);

// 必要に応じて、表示される行数を計算するための JavaScript コードを提供できます

于 2014-12-30T08:25:06.920 に答える