使用 jQuery UI 删除 <tr> 元素时表格丢失右侧

Question

我在div 中有一个表格，如下所示：

<div id='lastInsert'>  
    <h5>Last <span id='quantity'>15</span> successful inserts: </h5>   
            <table>  
            <tbody>  
                <tr>  
                    <th>Id</th>  
                    <th>LN</th>  
                    <th>FN</th>  
                    <th>MI</th>  
                    <th>Location</th>  
                    <th></th>  
                </tr>  
                </tbody>  
                <tbody>  
                <tr id='15166'><td>15166</td><td>Smith</td><td>John</td><td>J</td><td>594491567</td><td><a onclick='deleteClick(15166, "15166")'>Delete?</a></td></tr>  
                <tr id='15165'><td>15165</td><td>Brown</td><td>Charlie</td><td></td><td>594491567</td><td><a onclick='deleteClick(15165, "15165")'>Delete?</a></td></tr>  
                </tbody>  
            </table>  
        </div>  
</div>

我有这个 AJAX 函数，它返回 <tr> 并将其添加到表中：

function submitForm() {
    $.post("/ajax/files" , $("#files").serialize(), function(data){
        filesReset();
        if (data != "") {
            $("#lastInsert table tbody:last").prepend(data);
            $("#lastInsert table tbody:last tr:first").find("td").hide();
            $("#lastInsert table tbody:last tr:first").show("highlight" , {"color": "aqua"}, 500);
            $("#lastInsert table tbody:last tr:first").find("td").fadeIn(500);

            $("#lastInsert table tbody:last tr:last").remove();
        } else {
            alert("Insufficient criteria for submission.");
            $("#hidden").click();
        }
    });
}

我还有一个删除一行的 AJAX 函数：

function deleteClick(id, rowId) {
    filesReset();
    $("#" + rowId).css("background-color", "#FBB");

    $.post("/ajax/delete" , { "id": id, "offset": offset} , function(data){
        if (data) {
            $("#" + rowId).hide("explode", 500, function(){
                $("#" + rowId).remove();
                $("#lastInsert table tbody:last").append(data);
                $("#lastInsert table tr:last").effect("highlight", 1500);
            });
        } else {
            $("#" + rowId).find("td").css("color", "black");
            alert("System is unable to delete the specified record.");
        }
    });
}

当我在加载时创建的表上使用删除功能时，一切都按预期工作。但是，当我尝试删除作为 AJAX 操作submitForm() 的一部分添加的行时，一切正常，只是整个表格失去了右边框。这是返回 <tr> 的 PHP 函数：

class Mess_View_Helper_ViewLastInsertsAsTableRows extends Zend_View_Helper_Abstract
{
    public function viewLastInsertsAsTableRows($quantity = 15, $offset = 0, $header = false)
    {
        $filesTable = new Application_Model_DbTable_Files();
        $rowset = $filesTable->getLastInserts($quantity, $offset);

        foreach ($rowset as $row) {
            $output .= "<tr id='" . $row['fil_id_pk'] . "'>";
            $output .= "<td>" . $row['fil_id_pk'] . "</td>";
            $output .= "<td>" . $row['fil_last_name'] . "</td>";
            $output .= "<td>" . $row['fil_first_name'] . "</td>";
            $output .= "<td>" . $row['fil_middle_name'] . "</td>";
            $output .= "<td>" . $row['fil_box_id_fk'] . "</td>";
            $output .= "<td><a onclick='deleteClick({$row['fil_id_pk']}, \"" . $row['fil_id_pk'] . "\")'>Delete?</a></td></tr>";
        }

        if ($header) {
            $output =
            "<div id='lastInsert'>
                <h5>Last <span id='quantity'>$quantity</span> successful inserts: </h5>
                <table>
                <tbody>
                    <tr>
                        <th>Id</th>
                        <th>LN</th>
                        <th>FN</th>
                        <th>MI</th>
                        <th>Location</th>
                        <th></th>
                    </tr>
                    </tbody>
                    <tbody>
                    $output
                    </tbody>
                </table>
            </div>";
        }
        return $output;
    }
}

为什么边界消失了？

Answer 1

插入函数中 $output 的最后一行/附件看起来很可疑

$output .= "<td><a onclick='deleteClick({$row['fil_id_pk']}, \"" . $row['fil_id_pk'] . "\")'>Delete?</a></td></tr>";

应该是这样的

$output .= "<td><a onclick='deleteClick(".{$row['fil_id_pk']}.", \"" . $row['fil_id_pk'] . "\")'>Delete?</a></td></tr>";

它可能会弄乱您表格的格式。看起来很奇怪，它仍然会正确删除该行但会弄乱您的格式。无论如何，似乎值得纠正，看看是否有帮助。