Javascript lägga in kolumn/rad

2011-12-10 13:08

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

Javascript lägga in kolumn/rad

Hej,
Skulle behöva hjälp med att lägga till en kolumn i en färdig tabell.
Jag har endast lyckats lägga till en cell i tabellen så hur gör jag om jag vill lägga in flera stycken?

function init()
{

var tbl =document.getElementById("mytable").rows[0];
var column = document.createElement("th");
var TextNode = document.createTextNode("Test");
column.appendChild(TextNode);
tbl.appendChild(column);

}

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera

2011-12-10 14:04

Medlem

Plats: Uppsala
Registrerad: Sep 2002

●

Skrivet av Rickybobby:

Hej,
Skulle behöva hjälp med att lägga till en kolumn i en färdig tabell.
Jag har endast lyckats lägga till en cell i tabellen så hur gör jag om jag vill lägga in flera stycken?

function init()
{

var tbl =document.getElementById("mytable").rows[0];
var column = document.createElement("th");
var TextNode = document.createTextNode("Test");
column.appendChild(TextNode);
tbl.appendChild(column);

}

Gå till inlägget

En rad gör man med <tr>, så lägg in ett <tr>-element istället för <th>. <th> är för columnrubriker, du ska använda <td> för tabellceller.

Senast redigerat 2011-12-10 15:47

Rapportera Redigera

Citera flera Citera

2011-12-10 15:04

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

Okej, då har jag lagt in en kolumnrubrik och jag behöver fylla ut den(lägga till 4st celler).

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera

2011-12-10 15:15

Medlem

Plats: Ljusdal
Registrerad: Apr 2005

●

varje cell skapas av en <td>

Visa signatur

http://eriklarsson.eu | http://lightnings.se | http://tjenaeuropa.se | http://stjunne.se

Rapportera Redigera

Citera flera Citera

2011-12-10 15:16

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

Okej tack.
Jag behöver alltså skapa 4st <td> element om placera de under kolumn raden.

Senast redigerat 2011-12-10 15:33

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera

2011-12-10 15:58

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

Jag lägger upp en länk till html och js scriptet, observera att koden inte fungerar att köra online.

http://jsfiddle.net/nrTnL/12/

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera

2011-12-10 17:05

Medlem

Plats: Uppsala
Registrerad: Sep 2002

●

Skrivet av Rickybobby:

Jag lägger upp en länk till html och js scriptet, observera att koden inte fungerar att köra online.

http://jsfiddle.net/nrTnL/12/

Gå till inlägget

Det funkar fint, scriptet körs redan i "onLoad" så testa denna istället:

http://jsfiddle.net/nrTnL/13/

Rapportera Redigera

Citera flera Citera

2011-12-10 18:41

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

Tack erciz,
Så jag behöver lägga in td element under min kolumnrubrik, kan någon leda mig i rätt rikting.

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera

2011-12-10 18:45

Medlem

Plats: Uppsala
Registrerad: Sep 2002

●

Skrivet av Rickybobby:

Tack erciz,
Så jag behöver lägga in td element under min kolumnrubrik, kan någon leda mig i rätt rikting.

Gå till inlägget

Du lägger ju in varje element via föräldern. Så varje <tr> i din tabell ska ju ha en till <td>. Men måste du lägga till detta via JavaScript?

När du ändå har lagt till allt annat i tabellen statiskt så måste du väl kunna lägga in summa-cellerna statiskt också? Och sen bara fylla i värdet med JavaScript.

Rapportera Redigera

Citera flera Citera

2011-12-10 19:12

Medlem

Registrerad: Okt 2002

●

http://jsfiddle.net/jimmie/RkzxZ/

Rapportera Redigera

Citera flera Citera

2011-12-10 20:15

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

Tack Melody!

Senast redigerat 2011-12-10 20:29

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera

2011-12-12 13:25

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

Hur kommer jag åt cellerna i pris och antal kolumnerna?
Har gogglat en del men hittar inget bra.

Priset * antalet ska visas i en kolumn som jag har skapat via javascript.

Här är min kod
http://jsfiddle.net/abc212/Y2jdn/1/

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera

2011-12-12 22:25

Medlem

Registrerad: Okt 2002

●

http://jsfiddle.net/jimmie/RkzxZ/15/

Rapportera Redigera

Citera flera Citera

2011-12-13 01:00

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

Tack igen, dock så förstår jag inte riktigt loopen.
Jag förstår att det är effektivare och snyggare att loopa allt som du har gjort men jag undrar hur jag kommer åt ett element.
tex. column 4 rad 1.

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera

2011-12-13 15:27

Medlem

Registrerad: Okt 2002

●

http://jsfiddle.net/jimmie/RkzxZ/20/

Rapportera Redigera

Citera flera Citera

2011-12-14 11:44

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

Hoppas jag inte är jobbig Mel0dy som frågar så här mycket.
Hur kommer jag åt value i antal kolumnen? Det finns ju inget id så jag kan ju inte använda mig av getElementbyId().value.
Jag har tänkt multiplicera värdet i antal med Pris och sedan visa den i kolumnen summa.
Allt detta ska ske när genom min count funktion

Här är min kod
http://jsfiddle.net/abc212/Y2jdn/5/

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera

2011-12-14 12:13

Medlem

Registrerad: Okt 2002

●

Skrivet av Rickybobby:

Hoppas jag inte är jobbig Mel0dy som frågar så här mycket.
Hur kommer jag åt value i antal kolumnen? Det finns ju inget id så jag kan ju inte använda mig av getElementbyId().value.
Jag har tänkt multiplicera värdet i antal med Pris och sedan visa den i kolumnen summa.
Allt detta ska ske när genom min count funktion

Här är min kod
http://jsfiddle.net/abc212/Y2jdn/5/

Gå till inlägget

http://jsfiddle.net/jimmie/RkzxZ/22/

Din kod fungerar inte, får inte fram någon knapp.
Vad är det meningen att "var newCell = newRow.insertCell(0);" ska göra?
Varför har du både "var table = document.getElementById("pricetable");" och "var tableRef = document.getElementById("pricetable");" ?

Rapportera Redigera

Citera flera Citera

2011-12-14 12:26

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

EDIT : Raderat inlägg

Senast redigerat 2011-12-15 16:22

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera

2011-12-14 15:03

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

Har tagit bort mycket av koden och undrar det finns något smidigare sätt att lägga in en rad än https://developer.mozilla.org/en/DOM/table.insertRow?

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera

2011-12-14 15:25

Medlem

Registrerad: Okt 2002

●

Mycket smidigare än så blir det nog inte.
Men du kan ju lägga det i en loop, typ:

for(var i = 0; i < table.tBodies[0].rows[0].cells.length; i++){
    var newCell  = tableRow.insertCell(i);
    var newText  = document.createTextNode("");
    newCell.appendChild(newText);
}

Rapportera Redigera

Citera flera Citera

2011-12-14 15:32

Medlem

Plats: Stockholm
Registrerad: Jan 2011

●

Okej tack ska jobba vidare på detta.

Visa signatur

i5 6700K @4.5GHz -Noctua NH-U14S -Asus Geforce GTX 980 Ti Strix DirectCU III -ASUS PRO GAMING Z170 -Crucial DDR4 16 GB -Crucial MX300 750GB -Corsair RM750i - NZXT H440W Silent Ultra - ASUS VC239 -Dell Professional P1914S IPS

Rapportera Redigera

Citera flera Citera