开发者

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

开发者 https://www.devze.com 2023-04-05 15:45 出处:网络
I have a table in a div that looks like this: <div id=\'lastInsert\'> <h5>Last <span id=\'quantity\'>15</span> successful inserts: </h5>

I have a table in a div that looks like this:

<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>

I have this AJAX function that returns a <tr> and prepends it to the table:

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

I also have an AJAX function that deletes a row:

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

When I use the delete function on the table as it is created on load, everything works as expected. However, when I try to delete a row that I have added as part of the AJAX operation submitForm(), everything works fine except that the entire table loses its right border. Here is the PHP function that returns the <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'] . "\")'&开发者_C百科gt;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;
    }
}

Why is the border going away?


The last line/appendage for $output in your insert function looks suspicious

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

Seems it should have been

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

It could have possibly messed up the format of your table. Just seems weird that it would still remove the row correctly but mess up your format. In any case, seems worth correcting and seeing if that helps.

0

精彩评论

暂无评论...
验证码 换一张
取 消