<tr>元素删除使用jQuery UI


Table losing right side when <tr> element removed using jQuery UI

我在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.");
        }
    });
}

当我在加载时创建的表上使用delete函数时,一切都如预期的那样工作。但是,当我试图删除作为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;
    }
}

为什么边界消失了?

插入函数中$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>";

它可能会打乱表的格式。看起来很奇怪,它仍然会正确地删除行,但弄乱了你的格式。在任何情况下,似乎值得纠正,看看是否有帮助。