Javascript jQuery动态更新字段滚动页面

我有一个用户填写的表单，点击“保存”，它就会被下放到一个表中。从那里他们可以编辑或删除一行

但是，每次从表中添加或删除某些内容，或者将字段从表中重新填充到表单中（从而从表中删除，直到再次保存），页面都会跳回顶部

因此，每当用户更新此区域时，他们都必须向下滚动，这是一个相当大的表单。我有一个崩溃的大部分部分，但像我一样，我怀疑用户会离开他们开放，因为他们向下移动

有人知道这是什么原因吗？有没有什么简单的方法可以避免？我对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>

产品
单位
件
计量单位
NMFC
危险品
班
重量
L
W
H
立方体
密度

试试这个

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

  // your code 

  return false; //add this
});

---

最可能的罪魁祸首是实际元素的高度发生变化，导致包含元素的页面调整大小以适应它们。从那里看，这看起来像一个滚动动作

在这个JSFIDLE上，尝试在表中创建许多元素，然后单击它们以删除它们并将它们放回表单中。您将看到，一旦有足够的元素，页面就会滚动

我敢打赌，实现表更新的方法是删除整个表并重建它？如果是这样，请尝试执行JSFIDLE中示例的增量更新：

$(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();
    });
});

$（函数（）{
$（“：按钮”）。单击（函数（事件）{
//创建一个新的表行（但暂时不要插入它）
var newTableRow=$（“”）；
//对于每个文本框，向新表行添加相应的数据列
$。每个（$（“：text”）函数（索引，obj）{
//将数据来自的文本框的id存储在“from”属性中。
newTableRow.append（“”+$（this.val（）+“”）；
});
//将行追加到表中
newTableRow.appendTo（“表格”）；
//单击该行时
newTableRow.单击（函数（）{
//$（this）指此处的行元素
//对于每个子元素（td元素）
$.each（$（this）.children（），函数（索引，obj）{
//$（此处）指的是td元素
//在文本框中，使用我们先前存储在from属性中的id
//将该文本框的值设置为该td的值
$（“#”+$（this.attr（“from”）.val（$（this.text（））；
});
//$（this）指此处的行元素
$（this.remove（）；
});
//重新设置表单
//$（“表单”）[0]。重置（）；
event.preventDefault（）；
});
});

Post HTML代码，如果表格中包含您填写到表格中的数据，则所有包含数据的表格都会被添加/删除。要编辑一行，将其删除，然后作为新行再次添加。如何提交表格？页面跳转时？用户单击表格数据或保存回表格时？@InTry form从不“提交”单击事件将“绑定”到保存、编辑和删除按钮。感谢您的回复。重建整个表将需要太多jQuery工作，超出我的意愿。当用户编辑该行时，该行的数据将重新填充到表单中，然后是$（'#row_1'）。remove（）然后，当他们使用新ID再次保存该行时，我只需将其添加回去。我确信一旦添加了足够多的元素，页面就会滚动，但我选择了上一个答案，因为即使只是填充字段（从后端API到搜索联系人），也会发生“跳转”，并返回false；解决了所有跳转问题。