Javascript 有两个按钮的桌子。一个jqueryajax不'；t替换<；t车身>；属于<；表>；，而是将浏览器重定向到ajax url

编辑：我最初简化了代码，希望隔离我的问题，但我发现我需要显示未简化的代码来发现我的问题；因此，我将HTML和JavaScript替换为“完整版本”，并编辑了我的描述以包含新信息。

我有一张有两个按钮的桌子

一个按钮可以正常工作：它触发jQuery覆盖表单，以便用户可以为新行输入数据。AJAX然后删除“旧的”，并将其替换为新的（添加新行）。那很好--关键的是，它还将新行存储到数据库中

另一个按钮负责删除用户已检查的行。jQuery AJAX会从数据库中删除所选的行，但是它不会用新的（现在更小的）行替换“旧的”，而是将AJAX url加载到浏览器中，这将显示打算放入的原始新行集。使用后退按钮和F5键显示行确实已被删除

我不知道如何将这些按钮“混合”到一张桌子上

以下是jQuery：

    // opens a pop-up form as an overlay (id: #box_form) that has its own buttons
$('#addy').click(function(e){   
    //e.preventDefault();
    $('#box_form').dialog('open');
});

$( "#datepicker" ).datepicker(
        {altFormat: "yy-mm-dd"}
);

$('#box_form').dialog({
    autoOpen: false,
    height: 340,
    width: 400,
    modal: true,
    buttons: [
        {
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        },
        {
            text: "Submit",
            click: function() {
                var symbol = $("#symbol").val();
                var quant = $("#quant").val();
                var price = $("#price").val();
                var datepicker = $("#datepicker").val();
                var fee = $("#fee").val();
                var account = $("#account").val();
                var owner = $("#owner").val();
                // Returns successful data submission message when the entered information is stored in database.
                var dataString = 'symbol='+ symbol + '&quant='+ quant + '&price='+ price + '&datepicker='+ datepicker + '&fee='+ fee + '&account='+ account + '&owner='+ owner;
                if(symbol==''||quant==''||price==''||datepicker==''||fee==''||account=='')
                {
                    alert("Please Fill All Fields");
                }
                else
                {
                    $.ajax({
                        type: "POST",
                        url: "addPurch.php",
                        data: dataString,
                        cache: false,
                        success: function(result){
                            //document.getElementById("stocktablebody").innerHTML = result;
                            $("#stockstable tbody").html(result);
                        }
                    });
                    //close this little input form overlay
                    $( this ).dialog( "close" );
                }
                return false;
            }
        }
    ]
});

$('#selectAll').click(function(event){  
    $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
});

$('#removie').submit(function(event){   
    event.preventDefault();
    var remove = $("#remove[]").val();
    var owner = $("#owner").val();
    var dataString = 'remove='+ remove + '&owner='+ owner;              
    //var url = "removePurch.php"; //$(this).attr('action');// this attribute's action (specified in <form> tag)

    $.ajax({
        type: "POST",
        url: "removePurch.php",
        data: dataString,
        cache: false,
        success: function(result){
            //document.getElementById("stocktablebody").innerHTML = result;
            $("#stockstable tbody").html(result);
        }
    });
    return false;
});

//打开一个弹出式表单作为覆盖（id:#box_表单），该表单有自己的按钮
$（'#addy'）。单击（函数（e）{
//e、 预防默认值（）；
$（“#框形式”）。对话框（“打开”）；
});
$（“#日期选择器”）。日期选择器(
{altFormat:“yy-mm-dd”}
);
$（“#方框_表单”）。对话框({
自动打开：错误，
身高：340，
宽度：400，
莫代尔：是的，
按钮：[
{
文本：“取消”，
单击：函数（）{
$（此）.dialog（“关闭”）；
}
},
{
文本：“提交”，
单击：函数（）{
var symbol=$（“#symbol”）.val（）；
var quant=$（“#quant”）.val（）；
var价格=$（“#价格”）.val（）；
var datepicker=$（“#datepicker”）.val（）；
风险值费用=$（“#费用”）.val（）；
var账户=$（“#账户”）.val（）；
var owner=$（“#owner”）.val（）；
//当输入的信息存储在数据库中时，返回成功的数据提交消息。
var dataString='symbol='+symbol+'&quant='+quant+'&price='+price+'&datepicker='+datepicker+'&fee='+fee+'&account='+account+'&owner='+owner；
如果（符号=''数量=''价格=''日期选择器=''费用=''账户=''）
{
警告（“请填写所有字段”）；
}
其他的
{
$.ajax({
类型：“POST”，
url:“addPurch.php”，
数据：dataString，
cache:false，
成功：功能（结果）{
//document.getElementById（“stocktablebody”）.innerHTML=结果；
$（“#股票稳定体”）.html（结果）；
}
});
//关闭这个小的输入表单覆盖
$（此）.dialog（“关闭”）；
}
返回false；
}
}
]
});
$（'#selectAll'）。单击（函数（事件）{
$（this）.closest（'table'）.find（'td input:checkbox'）.prop（'checked'，this.checked））；
});
$（'#removie'）。提交（函数（事件）{
event.preventDefault（）；
var remove=$（“#remove[]”）val（）；
var owner=$（“#owner”）.val（）；
var dataString='remove='+remove+'&owner='+owner；
//var url=“removePurch.php”；//$（this.attr（'action'）；//此属性的操作（在标记中指定）
$.ajax({
类型：“POST”，
url:“removePurch.php”，
数据：dataString，
cache:false，
成功：功能（结果）{
//document.getElementById（“stocktablebody”）.innerHTML=结果；
$（“#股票稳定体”）.html（结果）；
}
});
返回false；
});

以下是HTML： （第一个大div是Add按钮的jQuery弹出窗口；第二个大块是实际的表。）

符号：
数量：
每种产品的价格：
费用：
日期
购买：
哪个帐户：
必须修复费用功能
忠诚个体
富达SEP
富达罗斯
斯科特拉
今天的活动
购买后的变化
成本基础
采购详情
去除
名称
象征
价格
美元零钱
%改变
量
购买价格
总成本
总变化百分比
零钱总额$
费用
账户
购买日期
国际商业机器
国际商用机器公司
166.95
+3.10
1.86
    <!-- Pop-up form hidden by JavaScript until button is clicked -->
<div id="box_form" title="Add a purchase">
    <form id="addsymbol" action="addPurch.php" method="POST"
        name="addstock" enctype="multipart/form-data">
        <input type="hidden" name="owner" id="owner" value="me" />
        <table class="popuptable">
            <thead>
                <tr>
                    <td class="right"><label for="symbol">Symbol:</label></td>
                    <td><input type="text" name="symbol" id="symbol"></td>
                </tr>
                <tr>
                    <td class="right">
                        <!--  for="..." Specifies which form element a label is bound to -->
                        <label for="quant">Quantity:</label>
                    </td>
                    <td><input type="text" name="quant" id="quant"></td>
                </tr>
                <tr>
                    <td class="right"><label for="price">Price for each: </label>
                    </td>
                    <td><input type="text" name="price" id="price"></td>
                </tr>
                <tr>
                    <td class="right"><label for="fee">Fee: </label></td>
                    <td><input type="text" name="fee" id="fee"></td>
                </tr>
                <tr>
                    <td class="right"><label for="datepicker">Date
                            Purchased: </label></td>
                    <td><input type="text" name="datepicker" id="datepicker">
                        <!-- had real trouble getting data to POST, just made all names,ids === and it worked -->
                    </td>
                </tr>
                <tr>
                    <td class="right"><label for="account">Which account:
                    </label></td>
                    <td><select name="account" id="account">
                            <option value="note">must fix fee functionality</option>
                            <option value="FidelityIndividual">Fidelity Individual</option>
                            <option value="FidelitySEP">Fidelity SEP</option>
                            <option value="FidelityRoth">Fidelity Roth</option>
                            <option value="ScottradeIRA">Scottrade IRA</option>
                    </select></td>
                </tr>
            </thead>
        </table>
    </form>
</div>

<!-- Table with two buttons (Add-a-row and Remove-a-row), and a checkbox for each row, and a checkbox to "check all rows" -->
<table id="stockstable" class="center">
    <thead>
        <tr>
            <th colspan="2">
                <!--  this just triggers form to come up.  Form has its own buttons -->
                <input type="submit" id="addy" value="Add a stock purchase">
            </th>
            <th colspan="3">Activity Today</th>
            <th colspan="2">Change Since Purchase</th>
            <th colspan="3">Cost Basis</th>
            <th colspan="3">Purchas Details</th>
            <form action="removePurch.php" method="post"
                enctype="multipart/form-data">
                <input type="hidden" name="owner" id="owner" value="me" />
                <th><button id="removie">Remove</button></th>
        </tr>
        <tr>
            <th>Name</th>
            <th>Symbol</th>
            <th>Price</th>
            <th>$ change</th>
            <th>% change</th>
            <th>Quantity</th>
            <th>Purchase Price</th>
            <th>Total Cost</th>
            <th>Total % Change</th>
            <th>Total $ Change</th>
            <th>Fee</th>
            <th>Account</th>
            <th>Purchase Date</th>
            <th><input type="checkbox" name="remove[]" id="selectAll"
                value="all"></th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>International Business Machines</td>
                <td>ibm</td>
                <td>166.95</td>
                <td>+3.10</td>
                <td>1.86</td>
                <td>1,986.88%</td>
                <td>$158.95</td>
                <td>8</td>
                <td>8</td>
                <td>71.00</td>
                <td>7.00</td>
                <td>note</td>
                <td>07/16/2015</td>
                <td><input type="checkbox" name="remove[]"
                    value="55a3436f5490c4ed4cbbe1a5"></td>
            </tr>
            <tr>
                <td>Facebook, Inc.</td>
                <td>fb</td>
                <td>87.95</td>
                <td>+2.07</td>
                <td>2.35</td>
                <td>999.38%</td>
                <td>$79.95</td>
                <td>8</td>
                <td>8</td>
                <td>71.00</td>
                <td>7.00</td>
                <td>note</td>
                <td>07/30/2015</td>
                <td><input type="checkbox" name="remove[]"
                    value="55a346745490c4ee4cbbe1a6"></td>
            </tr>
        </tbody>
    </form>
</table>

var remove = [];
$(':checkbox:checked').each(function(i){
    remove[i] = $(this).val();
});

$remove = explode(',', $_POST['remove']);