---
title: "Lägga till rader i tabell med javascript"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/161462-lägga-till-rader-i-tabell-med-javascript"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Addeladde"
published: "2007-06-13T12:46:23.000Z"
updated: "2007-06-18T12:45:34.000Z"
replies: 5
views: 778
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/161462-lägga-till-rader-i-tabell-med-javascript"
---

# Lägga till rader i tabell med javascript

## #1 — Addeladde, 2007-06-13T12:46Z

Hej

Hur lägger jag enklast till en rad med kolumner i en tabell?
Har gjort ett test men det fungerar bara i FF och inte i IE

```
<script>
  function addRow(){
 var t = document.getElementById('t1');
 t.innerHTML += "<tr><td colspan=2>fungerar</td></tr>";
 }
</script>
  <input type="button" value="add" onclick="addRow()" />
	<table id="t1">
  	<tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
 	</table>
```

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

## #2 — The_Hulk, 2007-06-13T13:25Z

Titta närmare på document.createElement(element), obj.appendChild(object) samt obj.setAttribute(key, value);

```
var oTr = document.createElement('tr);
var oTd = document.createElement('td');
oTd.setAttribute("colspan", "2");
tr.appendChild(oTd);
```

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

## #3 — colione, 2007-06-13T13:49Z

setAttibute funkar inte i ie6 som det ska. Plus att du har missat en apostrof. Dessutom har jag märkt att ie7 inte vill visa raderna om du inte lägger till en tbody.

Såhär hade jag löst det:
Funkar i ie6, ie7, opera, firefox och safari.

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
function addRow(){
var thetable = document.getElementById('t1').getElementsByTagName("tbody")[0];
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.colSpan=2
td.appendChild(document.createTextNode("Det funkar"));
tr.appendChild(td);
thetable.appendChild(tr);
}
</script>
</head>
<body>
 <input type="button" value="add" onclick="addRow()" />
  <table id="t1">
   <tbody>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
   </tbody>
 </table>
</body>
</html>
```

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

## #4 — Addeladde, 2007-06-14T10:43Z

Tack jag har kikat lite på detta och gjort några exempel.
Någon som vet hur man kan styra vart raden ska placera sig. På andra raden t.ex.?

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

## #5 — colione, 2007-06-14T12:46Z

Jo det går alldeles utmärkt, då får du använda metoden insertBefore.

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
function addRow(){
var thetable = document.getElementById('t1').getElementsByTagName("tbody")[0];
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.colSpan=2
td.appendChild(document.createTextNode("Det funkar"));
tr.appendChild(td);
thetable.insertBefore(tr, thetable.getElementsByTagName("tr")[1]);
}
</script>
</head>
<body>
 <input type="button" value="add" onclick="addRow()" />
  <table id="t1">
   <tbody>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
	<tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
   </tbody>
 </table>
</body>
</html>
```

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

## #6 — Addeladde, 2007-06-18T12:45Z

Problemet är att jag har ett asp:table som inte genererar \<tbody\> kan heller inte påverka det vad jag har läst.

Jag får köra med insertCell istället för att kunna lägga det där jag vill ha det.
Har försökt lägga till tbody i början av tabellen med javascript men inte lyckats.

Problemet med insertCell är att det bara blir td celler och inte th som jag på vissa ställen skulle vilja ha.

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/161462-lägga-till-rader-i-tabell-med-javascript
