Avatar billede weblance Nybegynder
28. april 2012 - 15:46 Der er 4 kommentarer og
1 løsning

Tilføje tabelrækker med indhold ved at klikke på en knap

Hej

Jeg er ved at lave en side med en formular, hvor der er tabelrækker med flere celler. I cellerne er der <input> felter. Så kunne jeg godt tænke mig muligheden for at tilføje flere rækker som har det samme indhold af celler og input felter, ved at klikke på en knap eller billede/link.

Nu er jeg langt fra 100 meter mester i JS, men kan ef af jer eksperter give mig et eksempel, eller link til at pege mig i den rigtige retning?

/Carl
Avatar billede weblance Nybegynder
28. april 2012 - 16:36 #1
Fandt selv enløsning.
Avatar billede mireigi Novice
28. april 2012 - 17:03 #2
Så må du gerne poste den herinde, så andre kan have gavn af den :)

Jeg smider min løsning herinde alligevel, selvom spørgsmålet er lukket. Synd, hvis arbejdet er spildt :)

Libraries
http://code.jquery.com/jquery-1.7.2.js

Code
Du skal selv erstatte fremhævet tekst med dine udgaver
<!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>
    <title>Insert Table Row</title>
    <script type="text/javascript" src="JQuery/jquery-1.7.2.js"></script>
    <style type="text/css" media="screen">
        #MyTable_Template
        {
            display: none;
        }
       
        #MyTable td
        {
            padding: 2px 4px;
        }
       
        .MyTable_Header td
        {
            font-weight: bold;
            border-bottom: 4px solid #000;
            text-align: left;
        }
       
        .MyTable_Header .Name
        {
            width: 270px;
        }
       
        .MyTable_Header .Address
        {
            width: 390px;
        }
       
        .MyTable_Header .Country
        {
            width: 140px;
        }
       
        .MyTable_Header .Phone
        {
            width: 110px;
        }
       
        #MyTable_Body td
        {
            border-bottom: 2px dotted #000;
        }
       
        #MyTable_Body tr:last-child td
        {
            border-bottom: none;
        }
       
        #MyTable_Body tr.Even
        {
            background-color: #CCF;
        }
       
        #MyTable_Body tr.Odd
        {
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <table id="MyTable" cellspacing="0">
        <thead>
            <tr>
                <td colspan="4">
                    <input id="MyTable_AddRow_Button" type="button" value="Add row" />
                </td>
            </tr>
            <tr class="MyTable_Header">
                <td class="Name">
                    Name
                </td>
                <td class="Address">
                    Address
                </td>
                <td class="Country">
                    Country / State
                </td>
                <td class="Phone">
                    Phone
                </td>
            </tr>
        </thead>
        <tbody id="MyTable_Body">
            <tr id="MyTable_Template">
                <td>
                    <input type="text" size="40" name="Name" />
                </td>
                <td>
                    <input type="text" size="60" name="Address" />
                </td>
                <td>
                    <select name="Country">
                        <option value="00">-- Choose --</option>
                        <optgroup label="Europe">
                            <option value="DK">Denmark</option>
                            <option value="DE">Germany</option>
                            <option value="UK">United Kingdom</option>
                        </optgroup>
                        <optgroup label="United States">
                            <option value="US-AL">Alabama</option>
                            <option value="US-NY">New York</option>
                            <option value="US-WA">Washington</option>
                        </optgroup>
                    </select>
                </td>
                <td>
                    <input type="text" maxlength="14" size="14" name="Phone" />
                </td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        $("#MyTable_AddRow_Button").click(function ()
        {
            var template = $("#MyTable_Template").clone();
            template.removeAttr("id");
            template.appendTo($("#MyTable_Body"));
            template.addClass(($("#MyTable_Body").children("tr").length - 1) % 2 == 0 ? "Even" : "Odd");
        });
    </script>
</body>
</html>
Avatar billede weblance Nybegynder
29. april 2012 - 16:19 #3
Jeg fandt dette script, som jeg har valgt at bruge:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Add Row example</title>
<script src="dist/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- jQuery Code will go underneath this -->
$(document).ready(function () {   
    // Code between here will only run when the document is ready
    $("a[name=addRow]").click(function() {
        // Code between here will only run when the a link is clicked and has a name of addRow
        $("table#myTable tr:last").after('<tr><td>Row 4</td></tr>');
        return false;
    });
});
</script>
</head>

<body>

<table style="width: 100%" id="myTable">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
<a href="#" name="addRow">Add Row</a>

</body>

</html>
Avatar billede mireigi Novice
29. april 2012 - 17:13 #4
Den kode du så har fundet, tilføjer jo ikke nogen input felter overhovedet. Det virker ganske givet, men det er ikke nogen pæn løsning, når du også skal have input felter med. At den så tilføjer rå html i stedet for DOM-elementer er en anden sag.
Avatar billede weblance Nybegynder
29. april 2012 - 17:19 #5
Jeg har modificeret den så der i den rå html kode også er input felter. Og ja du har fuldstændig ret i at det ikke er en pæn løsning, men det virker.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester