2012-03-07 9 views
0

テーブルから行を削除すると問題が発生します。
これは、私が使用しているJSコードです。テーブルから行を削除するときに残りの行が上/下に移動する

function rem(el) { 
    while (el.nodeName !== "TR") { 
     el = el.parentNode; 
    } 
    el.parentNode.removeChild(el); 
} 

テーブルは次のように構築されています:

<tr> 
    <td> 
    <span onclick="rem(this);"></span> 
    </td> 
</tr> 

表は、ブラウザの高さを超えると、スクロールバーが表示されたときに問題が発生します。スクロールバーが上部にあり、Iは、行を削除する場合

  • 、残りの行 アップ流れます。

  • スクロールバーが下部にあり、行を削除した場合、残りの行 が流れ落ちます。

  • スクロールバーがテーブルの真ん中にあり、行を削除すると、 残りの行がスクロールバーまで流れます。その後、行が流れ落ち始めるでしょう。 テーブルのいずれかのフローをアップまたはダウンしてください。一貫している限り、どちらの方法でも は問題ではありません。

クリックして行を削除するので、テーブルフローは一貫性を保つ必要があります。残りの行が異なる方法で移動する場合、ユーザーは次の行が上のものか下のものかを予測することは困難です。

私の質問はもちろん"行を削除した後に残りの行がどのように流れるかを設定するにはどうすればよいですか?"

さらに問題を説明する必要がある場合はお知らせください。

+0

私はあなたがスクロールバーを制御する必要があると思う、これを確認してください:http://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div –

+0

あなたは何を記述していますか通常のブラウザの動作とよく似ていますが、「フローアップ」と「フローダウン」の意味を理解していない可能性があります。 – fayerth

+0

@fayerth - うーん、それについて考えると、あなたは正しいかもしれない。 – Niklas

答えて

1

this is natural behavior以来:

  • あなたはトップアップ(上部のスクロールバー)している場合は、削除します要素と行が上にシフトします。あなたは要素を削除する場合は、ofcourseのあなたは、あなたがしている場合

  • を(に行く何もないので)上向きに行くつもりされて、下(下部のスクロールバー)でダウンしている場合

  • 真ん中では、自然に要素を取り除き、(ケース1のように)材料をシフトさせます。さらに上にシフトすることに気付いている場合は、ケース2が適用されます。今

あなたの問題は、ちょうどあなたがアイテムを削除した後、次のでした行をユーザーに伝えることであれば、私が言うように、さらに、項目のidを表示(あなたは色分けされた行のスキームを使用することをお勧め

また、多くのデータでユーザーを嫌がらせたり、次のことを知らなかったりするために、フェード削除やスライドアップ削除のようなものを採用することをお勧めします。突然ではありません(ユーザーは何かが削除されたことを知ることができます)。 jQueryUIには、これらの除去効果がたくさんあります。

+0

私は何かを試してみるつもりですが、これがうまくいかなければ、これは秋に戻ってしまうでしょう。ありがとう。 – Niklas

1

実際にはページの動作とは関係なく、ブラウザのスクロール方法とは関係ありません。

ブラウザのページの高さ以上のスペースを追加することは、このトリックを行う必要があります。ちょうどあなたのページの一番下にこれを追加するほとんどのブラウザで

が動作します:

<div style='height:100%'>&nbsp;</div> 
関連する問題