jquery tabel rij verwijderen

**gast17013** · 09-02-2010, 07:54

Hey,

Ik ben bezig met een klein cms systeempje waar je onderaan een overzicht ziet van de aangemaakte nieuws berichten. Alleen nu zit ik met een probleempje dat als je op het verwijder knopje klikt dan hoort hij eigenlijk netjes weg te faden/sliden. Maar mijn hele tabel gaat raar doen als hij aan het sliden is...

http://nieuw.colina-events.nl/beheer...euws/index.php dit is de pagina waar het om gaat(helemaal onderaan en danverwijder knopje drukken, dan zie je wel wat ik bedoel.

dit is mijn code:

PHP Code:


<?php
/*
 * Author:     Luuk Bijveld
 * Date:    15-12-2009
 *
 * Copyright: Luuk Bijveld
 *
 */

require_once("/home/njawxbks/domains/colina-events.nl/public_html/nieuw/config.php");
//require_once($webroot . "/beheer/includes/validation/login_check.inc.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
    require_once($webroot . "/beheer/includes/layout/head.inc.php");
?>
    <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
    <script type="text/javascript">
        bkLib.onDomLoaded(function() {
            new nicEditor({maxHeight : 200}).panelInstance('intro');
            new nicEditor({fullPanel : true, maxHeight : 400}).panelInstance('bericht');
        });
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('img.verwijder').click(function(e) {
            e.preventDefault();
            var parent = $(this).parent().parent().parent();
            $.ajax({
                type: 'get',
                url: 'verwijder_bericht.php',
                data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
                success: function() {
                    parent.slideUp(300,function() {
                        parent.remove();
                    });
                }
            });
        });
    });    </script>
</head>

<body>

    <div id="container">
    <?php 
        require_once($webroot . "/beheer/includes/layout/menu.inc.php");
    ?>
        <div style="clear: both"></div>
        <div id="content">
            <h2>Nieuws</h2>
            <form action="<?= $_SERVER["PHP_SELF"] ?>" method="post" enctype="multipart/form-data">
                <p>
                    Hier kunt u nieuwe berichten aanmaken en onderaan de pagina staan
                    alle aangemaakte nieuwsberichten die u kunt wijzigen en verwijderen.
                </p>
                <h3>Nieuwsbericht aanmaken</h3>
                <table id="overzicht_tabel">
                    <tr>
                        <td><label for="titel">Titel</label></td>
                        <td><input type="text" name="titel" id="titel" maxlength="250" /></td>
                    </tr>
                    <tr>
                        <td><label for="browser_titel">Browser titel</label></td>
                        <td><input type="text" name="browser_titel" id="browser_titel" maxlength="250" /></td>
                    </tr>
                    <tr>
                        <td><label for="kop_tekst">Kop tekst</label></td>
                        <td><input type="text" name="kop_tekst" id="kop_tekst" maxlength="250" /></td>
                    </tr>
                    <tr>
                        <td><label for="datum">Datum</label></td>
                        <td><input type="text" name="datum" id="datum" value="<?= date("Y-m-d") ?>" /></td>
                    </tr>
                    <tr>
                        <td><label for="intro_afbeelding">Intro afbeelding:</label></td>
                        <td><input type="file" name="intro_afbeelding" id="intro_afbeelding" /></td>
                    </tr>
                    <tr>
                        <td><label for="status">Status</label></td>
                        <td><input type="radio" name="status" id="open" checked="checked" value="1" /><label for="open" style="display: inline;">Open</label>&emsp;<input type="radio" name="status" id="gesloten" value="0" /><label for="gesloten" style="display: inline;">Gesloten</label></td>
                    </tr>
                </table>
                <label for="intro">Intro tekst</label> 
                <textarea id="intro" name="intro" cols="45" rows="7" style="height: 200px;"></textarea> 
                <label for="bericht">Bericht</label> 
                <textarea id="bericht" name="bericht" cols="65" rows="20" style="height: 400px;"></textarea> 
                <br />
                <input type="submit" name="verstuur" id="verstuur" value="Opslaan" />
            </form>
            <br />
            
            <h3>Overzicht</h3>
            <table cellpadding="0" cellspacing="0" class="overzicht-tabel">
                <tr align="left">
                    <th>Pagina</th>
                    <th>Status</th>
                    <th>Laatst gewijzigd</th>
                    <th>Laatst gewijzigd door</th>
                    <th>Acties</th>
                </tr>
                <?php 
                $dbc = new dbController();
                $dbc->connect();
                $result    = $dbc->runQuery("
                                            SELECT
                                                *
                                            FROM
                                                nieuws
                                            ORDER BY
                                                titel
                                        ");
                
                if(!$dbc->isResultEmpty($result))
                {
                    while($row = $dbc->fetchAsObject($result))
                    {
                ?>
                        <tr align="left">
                            <td><?= $row->titel ?></td>
                            <td><?php if($row->status == 0){ echo "Gesloten"; } else { echo "Open"; } ?></td>
                            <td><?= $row->laatst_gewijzigd ?></td>
                            <td><?= $row->gebruiker ?></td>
                            <td><a title="Wijzig dit item"><img src="/beheer/images/edit.png" alt="Wijzig dit item" title="Wijzig dit item" /></a>&emsp;<a href="#" title="Verwijder dit item"><img src="/beheer/images/delete.png" class="verwijder" id="<?= $row->id ?>" alt="Verwijder dit item" title="Verwijder dit item" /></a></td>                    
                        </tr>                
                <?php 
                    }
                }
                ?>
            </table>            
        </div>
            <div style="clear: both;"></div>
        
    </div>
    <?php
        require_once($webroot . "/beheer/includes/layout/bottom.inc.php");
    ?>
    </body>
</html>

**Arjen Rademaker** · 09-02-2010, 09:37

Als je een vaste breedte meegeeft aan de tabel en cellen dan denk ik dat het al beter gaat, of heb je dat al gedaan?

**Ton van Alebeek** · 09-02-2010, 10:10

Is dit voor eigen gebruik, of wil je dit straks verkopen als het helemaal goed werkt?

Ik zou er namelijk wel wat mee kunnen denk ik.

**Michel Schilder** · 09-02-2010, 10:12

Slide()-n van tabelrijen met Jquery gaat vrijwel nooit goed.. Sowieso niet in alle browsers

Gewoon hide() en show() gaat wel redelijk over het algemeen.

Wil je persé slide()-n, dan kun je er beter <div>'s van maken.

**René Vennik** · 09-02-2010, 10:38

Internet explore staat sowieso niet toe dat je in tabellen elementen verwijderd. Dan moet je de hele tabel opnieuw opbouwen.

**gast17013** · 09-02-2010, 12:16

Origineel gepost door Ton van Alebeek

Is dit voor eigen gebruik, of wil je dit straks verkopen als het helemaal goed werkt?

Ik zou er namelijk wel wat mee kunnen denk ik.

Deze wil ik straks verkopen, dus als jullie dit mee oplossen. Kunnen jullie hem straks voor een mooi prijsje kopen ;)

jquery tabel rij verwijderen