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

The most likely culprit is that your actual elements are changing in height, causing the page containing the elements to resize to fit them. From there, this can look like a scrolling action.

On this JSFiddle, try making a lot of elements in the table, then click them to remove them and put them back in the form. You'll see that once you have enough elements, the page will scroll.

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

I'm betting that the way you've implemented table updates is to delete the whole table and rebuild it? If so, try doing the incremental updates exemplified in the 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 回答
0

尝试这个

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

  // your code 

  return false; //add this
});
于 2013-02-07T15:03:20.487 回答