---
title: "Populera td genom clone() ?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/189886-populera-td-genom-clone"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "MickeA.com"
published: "2012-06-14T03:12:57.000Z"
updated: "2012-06-15T07:40:53.000Z"
replies: 8
views: 988
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/189886-populera-td-genom-clone"
---

# Populera td genom clone() ?

## #1 — MickeA.com, 2012-06-14T03:12Z

Tjena hej!

Med följande kod genererar jag en tabell utifrån ett json-objekt:

```
$.each(data.Result, function(x,y){
	$("<tr class=\"" + (x%2 == 0 ? "row-odd" : "row-even") + "\">\n"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"</tr>\n").appendTo('#Branches' + PhaseId + ' tbody');
});
```

Flera av dessa td's ska sedan innehålla en selectlista med ett flertal options. Json-objektet innehåller resp. rad's värde som ett tal. Detta för att inte behöva skicka hela selectlistan för varje rad med json.

Vad jag vill göra är alltså att:

- Skriva ut en tabellrad.
- Klona en selectlista som redan finns i koden.
- Markera rätt Option för resp. rad

Jag har testat med bl.a.:

```
$.each(data.Result, function(x,y){
	$("<tr class=\"" + (x%2 == 0 ? "row-odd" : "row-even") + "\">\n"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"<td>" + $(".style").clone() + "</td>"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"<td></td>\n"
	 +"</tr>\n").appendTo('#Branches' + PhaseId + ' tbody');
});
```

Men det fungerar inte alls. Jag var inne på att sätta t.ex. klassnamn på varje td och sen klona select-listan, **men det måste finnas något smidigare sätt!?**

Tacksam för förslag!

Permalänk: https://www.webforum.nu/p/189886

## #2 — onkelborg, 2012-06-14T11:24Z

Du håller på och grejjar med strängar, då får du hålla dig till strängar också. Byt $(".style").clone() mot $(".style").clone().wrap("\<div /\>").parent().html()

(Sen föreslår jag att du cachar det där i en variabel innan loopen. Kan också vara en idé att bygga alltihopa programmatiskt direkt i DOM istället för att klistra strängar.)

\[edit\]
Btw, titta på <http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html>
\[/edit\]

Permalänk: https://www.webforum.nu/p/2299143

## #3 — voigtann1, 2012-06-14T12:38Z

som onkelborg skriver så behöver du hämta ut HTML koden inte en jQuery referens (du bör få \[object Object\] eller något liknande i din HTML markup nu. Sen vill du nog undvika att köra appendTo för många gånger. skrev om den lite:

```
var str = [],
	styleHTML = $(".style").clone().wrap("<div/>").parent().html();

$.each(data.Result, function(x,y){
	str.push('<tr class="' + (x%2 == 0 ? 'row-odd' : 'row-even') + '">');
	str.push('<td></td>');
	str.push('<td></td>');
	str.push('<td>' + styleHTML + '</td>');
	str.push('<td></td>');
	str.push('<td></td>');
	str.push('<td></td>');
	str.push('<td></td>');
	str.push('<td></td>');
	str.push('</tr>');
});

$(str.join()).appendTo('#Branches' + PhaseId + ' tbody');
```

Permalänk: https://www.webforum.nu/p/2299144

## #4 — MickeA.com, 2012-06-15T04:25Z

Jag har fått till det nu så att det skrivs ut en select på rätt rad. Jag lyckas däremot inte att sätta "rätt" \<option\> som selected. 

```
$.each(data.Result, function(x,y){
	if(y.Distance != 0){
		$('.style option[value=' + y.Distance + ']').attr("selected", "selected");
	}
	Distance = $(".style").clone().wrap("<div/>").parent().html();

	Res.push("<tr class=\"" + (x%2 == 0 ? "row-odd" : "row-even") + "\">\n");
        Res.push("<td>" + Distance + "</td>\n");
	// ...
});
$(Res.join()).appendTo('#Branches' + PhaseId + ' tbody');
```

Det som händer just nu är att \<select\>-listan som *jag klonar*, den som ligger i en dold div i headern, får rätt värde, men den klonade listan får inte någon *selected* alls.

Vad är fel?

Permalänk: https://www.webforum.nu/p/2299153

## #5 — voigtann1, 2012-06-15T04:43Z

```
Distance = $(".style").clone().wrap("<div/>").val(y.Distance).parent().html();
```

borde fungera

Permalänk: https://www.webforum.nu/p/2299154

## #6 — MickeA.com, 2012-06-15T06:36Z

Nej, nu händer inget alls.

Permalänk: https://www.webforum.nu/p/2299156

## #7 — MickeA.com, 2012-06-15T06:57Z

Här är "all" kod:

```
<div style="display: none;>
	<select class="style large">
	<?php foreach($style_list as $key => $item){?>
	<option value="<?php echo $item['value'];?>"><?php echo $item['name'];?></option>
	<?php }?>
	</select>

	<!-- här kommer fler selectlistor senare... -->
</div>

...

<script type="text/javascript">
JSON = [
	{
	"hasError":false,
	"msgError":[],
	"Result":[
		{"Id":"2738","Parent":"294","Distance":2,"Pool":"2","Gender":"1","MinAge":"1","MaxAge":"99","Order":"1"},
		{"Id":"2739","Parent":"294","Distance":2,"Pool":"2","Gender":"2","MinAge":"1","MaxAge":"99","Order":"2"}
		]
	}
]

function(data){
	$.each(data.Result, function(x,y){
		Dist = $(".style").clone().attr("id", "foo" + y.Id).wrap("<div/>").parent().html();

		Res.push("<tr class=\"" + (x%2 == 0 ? "row-odd" : "row-even") + "\">\n");
		Res.push("<td></td>\n");
		Res.push("<td>" + Dist + "</td>\n");
		//...
		Res.push("</tr>\n");
	});
	$(Res.join()).appendTo('#Branches' + PhaseId + ' tbody');
}
</script>
```

Om nu "Dist" är en sträng måste jag väl ange vilken option som ska vara selected **innan** jag klonar obj? Just nu får varje select ett eget ID, så det fungerar, men lyckas inte få rätt *selected*.

Såfort jag löst det här kommer "Pool" och "Gender" också vara varsin select, så det blir i slutändan mer kod än såhär.

Permalänk: https://www.webforum.nu/p/2299158

## #8 — voigtann1, 2012-06-15T07:06Z

<http://jsbin.com/ekuxik/> kanske?

Permalänk: https://www.webforum.nu/p/2299159

## #9 — MickeA.com, 2012-06-15T07:40Z

Japp! Tack!

Permalänk: https://www.webforum.nu/p/2299160

---

Tråden på webben: https://www.webforum.nu/amne/javascript/189886-populera-td-genom-clone