Таблица теряет правую сторону, когда элемент <tr>удален с помощью пользовательского интерфейса jQuery

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(), все работает нормально, за исключением того, что вся таблица теряет свою правую границу.Вот функция PHP, которая возвращает <tr>:

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 .= "<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>";

Возможно, это испортило формат вашей таблицы. Просто кажется странным, что он все равно удалит строку правильно, но испортит ваш формат. В любом случае, кажется, стоит исправить и посмотреть, поможет ли это.