html - indsæt/fjern række i tabel med jquery - Udvikleren.dk

Tags: jquery html

Bruger #16670 @ 31.01.16 00:42

Hej

Jeg sidder her og bøvler med et lille script, som kan oprette og slette rækker i en tabel når man trykker på nogle knapper (buttons).

jsfiddle

Jeg er dog rendt ind i en del problemer som jeg ikke rigtig kan finde ud af at løse selv

Problemerne er:

1. hvis et felt er udfyld og jeg tilføjer et, så bliver feltet genereret med det samme indhold som den ovenstående - det gør den fordi jeg bruger .clone(), men jeg forsøger at fjerne indholdet i det nye felt med .removeAttr('value'), men det virker ikke.

2. min "Remove" button forsvinder, hvis der er mindre end to rækker i tabellen, men den kommer ikke igen hvis antallet af rækker er større end 2

Jeg er slet ikke god til jquery, så jeg er lidt ude og svømme her - er der nogen som kan give mig en hånd med at få det til at virke ?

På forhånd tak

Indlæg senest redigeret d. 31.01.2016 00:43 af Bruger #16670

5 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 13 karma

Sorter efter stemmer Sorter efter dato

Bruger #11386 @ 31.01.16 12:07

503

Hej, jeg har rettet din jsfiddle lidt til, så det forhåbentligt giver lidt mere mening.

1. Når du bruger clone, skal du manipulere med den klon du lige har lavet. Det du lavede før fjernede value på alle input felter. Derudover ændrede jeg det til val("")

2. Jeg har lavet en ny funktion der bliver brugt både når man tilføjer og fjerner, samt på document.ready

https://jsfiddle.net/sqo96m0g/8/

Bruger #16075 @ 31.01.16 12:37

1.223

en alternativ løsning til Casper Hansen

hvorfor ikke bruge append() ??

Kode

 
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <title>demo</title>
        <!-- jQuery + bootstrap jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <style>
            .txtbox {
                border: none;
                width: 100%;
            }
            input {
                font-size: 17px;
                height: 30px;
            }
            table {
                background: none repeat scroll 0 0 #abcdef;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="button" value="Add" class="plusbtn" />
            <input type="button" value="Remove" class="minusbtn" />
        </div>
        <table width="50%" border="1" cellpadding="1" cellspacing="1" class="test">
            <tr>
                <td>Name</td>
                <td>Emp no.</td>
                <td>Company</td>
                <td>Mobile no.</td>
            </tr>
        </table>
        <script>
            function add_tr() {
                str = '<tr><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td>    <td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>';
                return str;
            }

            // starter med at tilføje den første tr og skjule minusbtn 
            $(".test").append(add_tr());
            $('.minusbtn').hide();

            // kigger efter event
            $('.plusbtn').click(function () {
                $(".test").append(add_tr());

                if ($(".test tr").length > 1) {
                    $('.minusbtn').show();
                }
            });

            $('.minusbtn').click(function () {
                if ($(".test tr").length > 1) {
                    $(".test tr:last-child").remove();
                    // hvis vi fjerner den sidste tr vi kan skrive i skjules knappen        
                    if ($(".test tr").length == 1) {
                        $('.minusbtn').hide();
                    }
                }

            });
        </script>
    </body>
</html>

Bruger #16670 @ 31.01.16 15:56

Hej

Takker for jeres hjælp

@Casper

Jamen, den sidder jo lige i skabet :bounce:

- jeg fornemmer, at du har forstået hvorfor jeg har valgt .clone()

@Ronny

Takker for din alternative løsning, som jeg dog ikke finder så fleksibel som @Caspers løsning - jeg kan se at du er nød til at definerer, hvordan table row'en skal se ud i scriptet ! - det behøver @Casper ikke, da han bare kloner det markup som brugeren laver.

Jeg har fundet en del eksempler på nettet, hvor de gør som du gør og det var derfor jeg tænkte om man ikke kunne "klone sig" til en lettere løsning og det kan man jo i følge @Caspers eksempel.

Takker endnu en gang fordi I gad at bruge tid på at hjælpe mig.

Bruger #11386 @ 01.02.16 16:18

503

@Henrik Hvis jeg selv skulle lave det, ville jeg nok lave et skjult markup element jeg kunne clone efter. På den måde får du fleksibilitet, men uden at skulle "resette" din clone.

Indlæg senest redigeret d. 01.02.2016 16:18 af Bruger #11386

Bruger #13363 @ 04.02.16 08:35

160

"templaten" behøver vel ikke ligge skjult på siden. Kan det ikke hentes ind fra en html fil? Vil mene at det gør det hele lidt mere rent.

indsæt/fjern række i tabel med jquery

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler