5 svar · 773 visningar · startad av Addeladde
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>
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);
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>
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.?
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>
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.