Tabel maken met JavaScript

Status
Niet open voor verdere reacties.

Tweety05

Nieuwe gebruiker
Lid geworden
13 apr 2012
Berichten
2
Kan iemand mij alsjeblieft hiermee helpen, ik heb deze codes hard nodig
Ik wil een tabel met 4 rijen maken met Javascript.
Ik wil in de eerste 3 rijen bij elke rij keuzes hebben, met onClick.
Zodat de bezoeker per rij een keuze kan maken.
In de 4e rij wil ik een link hebben.
En als de bezoeker op de link klikt moeten alle drie de keuzes in een popup komen.
Ik worstel er al een paar dagen mee maar het lukt me maar niet ,helaas.
Ik hoop dat iemand me kan helpen met de scriptcode die in de head moet. En ook wat ik in de tabel moet zetten en in de hyperlink.
De tabel heb ik hieronder staan, en heb er ook bij gezet welke <td>'s een keuze moeten hebben.Het liefst de gehele code. Alvast bedankt!
 
Hoi Tweety05,
Welkom met je eerste vraag op het forum!

Maar, eh, dit is geen vraag "hoe van tabel tot css te komen", het is een vraag die over javascript gaat.
En:
De tabel heb ik hieronder staan
... nou zie ik toch helemaal geen tabel! :rolleyes:

Met vriendelijke groet,
CSShunter
 
Hoi Tweety :)

Dit zijn functies die ik graag gebruik voor het maken van nieuwe elementen in je document:
[JS]function extend(dest, source, recursive, force) {
for (var k in source) {
var hasK = dest[k] !== undefined;
if (recursive && hasK && typeof source[k] == "object" && typeof dest[k] == "object") {
extend(dest[k], source[k], recursive, force);
}
else if (force || !hasK) {
dest[k] = source[k];
}
}
}
function add(parent, tag, attributes) {
var el = create(tag, attributes);
parent.appendChild(el);
return el;
}
function create(tag, attributes) {
var el = document.createElement(tag);
if (attributes) extend(el, attributes, true, true);
return el;
}[/JS]
Scheelt gewoon een beetje typewerk ;)

Bij wat je noemt 'keuzes' denk ik: <input type="radio"/>-elementen. Verder geef je aan dat je ergens een event-listener wil toevoegen (onclick). Voor het vinden van de waarde in een radio-group en het toevoegen van een event-listener gebruiken we de volgende functies:
[JS]function addEvent(el, type, callback, useCapture) {
if (el.addEventListener) {
el.addEventListener(type, callback, useCapture);
}
else if (el.attachEvent) {
el.attachEvent("on" + type, callback);
}
else {
el["on" + type] = callback;
}
};
function getRadioValue(radioGroup) {
var i = 0;
while (i < radioGroup.length && !radioGroup.checked) {
i++;
}
return i < radioGroup.length ? radioGroup.value : undefined;
}[/JS]

De tabel kun je dan zo maken:
[JS]function map(list, f, scope) {
var result = new list.constructor();
for (var k in list) {
var el = list[k];
result[k] = f.call(scope || el, el, k, list);
}
return result;
}

var aantalRijen = 3, aantalKolommen = 5, tabelPlaats = document.body;

var table = add(tabelPlaats, "table"), tr, radioGroups = [];
for (var i = 0; i < aantalRijen; i++) {
tr = add(table, "tr");
radioGroups = [];
for (var j = 0; j < aantalKolommen; j++) {
radioGroups.push(add(add(tr, "td"), "input", {
type: "radio",
name: "keuze" + i,
value: j
}));
}
}

var a = add(add(add(table, "tr"), "td", {
colSpan: aantalKolommen
}), "a", {
href: "javascript: void 0;",
innerHTML: "Ok"
});

addEvent(a, "click", function() {
alert(map(radioGroups, function(radioGroup) {
return getRadioValue(radioGroup);
}).join(", "));
}, false);[/JS]
 
Hallo, hardstikke bedankt voor het antwoord, het is me gelukt.
Alsnog bedankt:d
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan