0

ユーザーが入力し、[保存]をクリックすると、テーブルに移動するフォームがあります。そこから、行を編集または削除できます。

ただし、テーブルに何かが追加または削除されるか、フィールドがテーブルからフォームに再入力される（したがって、再度保存されるまでテーブルから削除される）たびに、ページは一番上にジャンプします。

したがって、ユーザーがこの領域を更新するたびに、下にスクロールする必要があり、これはかなり大きなフォームです。私はほとんどのセクションを折りたたんでいますが、私のように、ユーザーが下に移動するときにセクションを開いたままにしておくと思います。

これを引き起こす原因と、それを回避するための本当に簡単な方法があるかどうかを誰かが知っていますか？私はjQuery、さらにはJSに非常に慣れており、ほとんどの時間をサーバー側で過ごしてきました。

編集：HTMLの追加：

<div class="scroll">
    <table class="table table-condensed table-striped table-bordered scroll">
        <thead>
            <tr>
                <th>Product</th>
                <th colspan="2">Units</th>
                <th>Pieces</th>
                <th>UOM</th>
                <th>NMFC</th>
                <th>Hazmat</th>
                <th>class</th>
                <th>weight</th>
                <th>L</th>
                <th>W</th>
                <th>H</th>
                <th>Cube</th>
                <th>Density</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody id="productTable">
        </tbody>
    </table>
</div>
4

2 に答える 2

0

これを試して

$(SAVE/EDIT).click(function () {

  // your code 

  return false; //add this
});
于 2013-02-07T15:03:20.487 に答える
0

最も可能性の高い原因は、実際の要素の高さが変化しているため、要素を含むページがそれらに合わせてサイズ変更されていることです。そこから、これはスクロールアクションのように見えます。

このJSFiddleで、テーブルに多くの要素を作成してみてから、それらをクリックして削除し、フォームに戻します。十分な要素があると、ページがスクロールすることがわかります。

http://jsfiddle.net/turiyag/VUqCB/3/

テーブルの更新を実装する方法は、テーブル全体を削除して再構築することだと思いますか？その場合は、JSFiddleで例示されている増分更新を実行してみてください。

$(function() {
    $(":button").click(function(event) {
        //Make a new table row (but don't insert it just yet
        var newTableRow = $("<tr/>");

        //For every textbox, add a corresponding data column to the new table row
        $.each($(":text"), function(index, obj) {
            //Store the id of the textbox the data is from in the "from" attribute.
            newTableRow.append('<td from="' + $(this).prop("id") + '">' + $(this).val() + '</td>');
        });
        //Append the row to the table
        newTableRow.appendTo("table");
        //When the row is clicked
        newTableRow.click(function() {
            //$(this) refers to the row element here
            //For every child element (td element)
            $.each($(this).children(),function(index, obj) {
                //$(this) refers to the td element here
                //In the textbox with the id we previously stored in the from attribute
                //Set the value of that textbox to the value of this td
                $("#" + $(this).attr("from")).val($(this).text());
            });
            //$(this) refers to the row element here
            $(this).remove();
        });
        //Reset the form
        //$("form")[0].reset();
        event.preventDefault();
    });
});
于 2013-02-07T15:33:25.150 に答える