CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

weblance Nybegynder

28. april 2012 - 16:36 #1

Fandt selv enløsning.

Synes godt om

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>

Synes godt om

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

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

Synes godt om

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.

Synes godt om

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.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS