Plus 7 dage i JS?

Hvordan vil du sætte måneder på ?-)

-- arh, du vil bare skifte selected, så det er den næste måned !-)

<script type="text/javascript">

var intSelects = 0;

function appendSelect(){
    var today = new Date();
    intSelects++;

    var actDate = new Date(today.getFullYear(),today.getMonth(),today.getDate()+(7*(intSelects-1)));
    var thisDay = actDate.getDate();
    var thisMonth = actDate.getMonth();
    var thisYear = actDate.getFullYear();

//og så videre med
    var dash //osv.

-- du skal nok, for at synkronisere månedsnumre og nave, så gøre:

    var mName = ['','januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december'];
    for(i=1;13>i;i++){
        newSel.options[newSel.length] = new Option(mName[i],i);
    }
   
    newSel.options[thisMonth].selected = true;

-- som du vil opdage er javascripts Date-objekt utroligt tilgivende, og accepterer uden problemer, at du f.eks. opretter den 16. gruppe med new Date(2005,6,123), altså d. 123. juli 2005, hvilket den bare oversætter til 31. oktober 2005 !-)

Ser ud til at funge nogen lunde, dog hopper den fra nov til jan og kommer også med en fejl. Den er ikke glad for dec, det er ellers så hyggelig en måned.

Den hopper da ikke en måned hos mig ?-)

-- har du erstattet de kodelinjer i måneds-tingen eller har du bare rettet og overset een af dem:

-- Indsat en tom option først i arrayet
-- Ændret til 13 i løkken og
-- fjernet -1 i selected-tingen ...

Hvis jeg fjener -1 i selectedIndex, så er den en dag for høj.

Jeg smider lige min kode:

<script type="text/javascript">

var intSelects = 0;

function appendSelect(){

    var today = new Date();
    intSelects++;
   
    var actDate = new Date(today.getFullYear(),today.getMonth(),today.getDate()+(7*(intSelects-1)));
    var thisDay = actDate.getDate();
    var thisMonth = actDate.getMonth();
    var thisYear = actDate.getFullYear();
       
    var dash = document.createTextNode(" ");
    var mother = document.getElementById('motherDiv');
    var newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Day' + intSelects;
    newSel.id = 'Date_Day' + intSelects;
    mother.appendChild(newSel);
 
    for(i=1;32>i;i++){
        newSel.options[newSel.length] = new Option(i, i);
    }
   
      newSel.options.selectedIndex = thisDay - 1;
 
    mother.appendChild(dash);
 
    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Month' + intSelects;
    mother.appendChild(newSel);
         
    var mName = ['','januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december'];
    for(i=1;13>i;i++){
        newSel.options[newSel.length] = new Option(mName[i],i);
    }
   
    newSel.options[thisMonth - 1].selected = true;
 
    dash = dash.cloneNode(true);
    mother.appendChild(dash);
 
    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Year' + intSelects;
    mother.appendChild(newSel);
 
    //3 år frem i tiden
    for(i=0;3>i;i++){
        newSel.options[newSel.length] = new Option(thisYear + i, thisYear + i);
    }
 
    dash = dash.cloneNode(true);
    mother.appendChild(dash);
 
    var newLine = document.createElement("BR");
    mother.appendChild(newLine);

    var newLine = document.createElement("BR");
    mother.appendChild(newLine);
           
}

En dag ???

-- i måneds-tingen ???

Hvis du har den med er måneden da en for lav ?-)

Nåee måned index-tingen... ja, nu er den rettet og det kører fint. Den springer ikke længere over dec.

Men hvorfor skal index-tingen for dato så trække en fra?

      newSel.options.selectedIndex = thisDay - 1;
   
      newSel.options.selectedIndex = thisMonth;

Tryk svar ;-)

Fordi .getMonth() på javascript Date-objektet er en slags index og derfor 0-baseret, altså betyder 0 januar, 1 februar ... og 11 december ...

Dette er også tilfældet med index i options, så options[0] er den første option i en select, altså har den option, som indeholder 1 index 0 !-)

Velbekomme '-)

Takker for det hele :-D

Den sidste ting :-)

Jeg forstår ikke følgende. Hvis jeg vælger en anden dato i den sidste dropdown-box og beder systemet om at komme med et nyt sæt dropdown-boxene (baseret ud fra den valgte dato, dog en uge længere frem), så kommer den oprindelige dato (som stod i box'en plusset med en uge).

Derved ignorer den at man har valgt en anden dato... he he nu forstår jeg det, det er fordi at min linie:

parseInt(document.frmUser.elements["Date_Day" + (intSelects - 1)].value) + 7;

Er blevet udfastet i dit ellers så gode script, som nu hedder:

var actDate = new Date(today.getFullYear(),today.getMonth(),today.getDate()+(7*(intSelects-1)));

Kan du hjælpe mig med at få min kode koblet på igen, fordi den er meget praktisk for dem, som skal springe over en eller flere uger (f.eks. ferieuger) eller hvor et arrangement skal tage en ny sæson "et andet sted i kalenderen".

Tjah, jeg forstod der, som du bare ville have fortløbende select-ting, for så må vi skabe actDate-tingen udfra de valg, som findes i de gamle selects:

Det blev lige til en del justeringer, da jeg også havde brug for værdierne fra de andre selects:

<form name="frmUser">
<div id="motherDiv"></div>

<button onclick="appendSelect(this.form);">Opret nye selects</button>
</form>
<script type="text/javascript">

var intSelects = 0;

function appendSelect(f){

    var actDate = intSelects==0?new Date():new Date(f.elements["Date_Year"+intSelects].value, f.elements["Date_Month"+intSelects].selectedIndex, f.elements["Date_Day"+intSelects].selectedIndex+8);

    intSelects++;

    var thisDay = actDate.getDate();
    var thisMonth = actDate.getMonth();
    var thisYear = actDate.getFullYear();
       
    var dash = document.createTextNode(" ");
    var mother = document.getElementById('motherDiv');
    var newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Day' + intSelects;
    newSel.id = 'Date_Day' + intSelects;
    mother.appendChild(newSel);
 
    for(i=1;32>i;i++){
        newSel.options[newSel.length] = new Option(i, i);
    }
   
      newSel.selectedIndex = thisDay - 1;
 
    mother.appendChild(dash);
 
    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Month' + intSelects;
    newSel.id = 'Date_Month' + intSelects;
    mother.appendChild(newSel);
         
    var mName = ['','januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december'];
    for(i=1;13>i;i++){
        newSel.options[newSel.length] = new Option(mName[i],i);
    }
   
    newSel.selectedIndex = thisMonth;
 
    dash = dash.cloneNode(true);
    mother.appendChild(dash);
 
    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Year' + intSelects;
    newSel.id = 'Date_Year' + intSelects;
    mother.appendChild(newSel);
 
    //3 år frem i tiden
    for(i=0;3>i;i++){
        newSel.options[newSel.length] = new Option(thisYear + i, thisYear + i);
    }
   
    newSel.selectedIndex = 0;
 
    dash = dash.cloneNode(true);
    mother.appendChild(dash);
 
    var newLine = document.createElement("BR");
    mother.appendChild(newLine);

    var newLine = document.createElement("BR");
    mother.appendChild(newLine);
           
}

function daysInFebruary(ar){
    dage = ((ar % 4 == 0)&&((!(ar % 100 == 0))||(ar % 400 == 0))) ? 29 : 28;
    return (dage);
}
   
function isDate(dd,mm,aaaa){

    dd = parseInt(dd,10);
    mm = parseInt(mm,10);
    aaaa = parseInt(aaaa);
   
    daysInMonth = new Array(12);
    daysInMonth[1] = 31;
    daysInMonth[2] = daysInFebruary(aaaa);
    daysInMonth[3] = 31;
    daysInMonth[4] = 30;
    daysInMonth[5] = 31;
    daysInMonth[6] = 30;
    daysInMonth[7] = 31;
    daysInMonth[8] = 31;
    daysInMonth[9] = 30;
    daysInMonth[10] = 31;
    daysInMonth[11] = 30;
    daysInMonth[12] = 31;
   
    if(dd > daysInMonth[mm]||mm > 12){
        alert("Du har valgt en ugyldig dato");
        return false;
    }
       
    return true;
    }

function isTime(tt, mm){

    if (tt > 23 && mm > 0) {
        alert("Du har valgt et ugyldig tidspunkt");
        return false;
    }
   
    return true;
}

</script>

Yes, yes, yes - nu virker alt.

Dog forstår jeg ikke, hvordan man opretter checkbox-elementet i DOM, hvor det er afkrydset fra start af. Elementet er godt nok oprettet, dog ikke afkrydset:

    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.checked = true;
    mother.appendChild(newCheck);

Der er åbenbart nogle issues omkring disse ting, ligesom med selectedIndex:

    newCheck.name = 'Cancel_date' + intSelects;
    mother.appendChild(newCheck);
    newCheck.checked = true;

<ole>

Jamen, hej igen. Der var vist noget, der ikke gik helt op for dig i det andet spørgsmål, hvorfor jeg må prøve igen ... og denne gang vil jeg godt bede dig teste de eksempler, jeg skriver  ;o)

Så let er det desværre ikke at rode med form-elementer i DOM  :o|

IE har en elendig håndtering af DOM og kan ikke med DOM sætte en name-attribute på et element, oprettet via DOM. Prøv f.eks. dette script:

<script type="text/JavaScript">
window.onload = function() {
    var sel = document.createElement("select");
    sel.name = "gnu";
    document.body.appendChild(sel);
    alert(document.body.innerHTML)
}
</script>

- end ikke dette kan IE klare:

<script type="text/JavaScript">
window.onload = function() {
    var sel = document.createElement("select");
    sel.setAttribute("name", "gnu");
    document.body.appendChild(sel);
    alert(document.body.innerHTML)
}
</script>

Du er nødt til at lave et browsercheck - og hvis det er en IE, må du skrive:

<script type="text/JavaScript">
window.onload = function() {
    var sel = document.createElement("<select name=\"gnu\"></select>");
    document.body.appendChild(sel);
    alert(document.body.innerHTML)
}
</script>

Husk i øvrigt, at tag-navnet bør skrives med småt i createElement  ;o)

/mvh
</bole>

IE sætter simpethen ikke en name-attribut på et input-element, når man bruger document.createElement på den standardiserede måde. Hvis du skal bruge dine name-attributter til noget, er det med andre ord ret væsentligt, du finder en anden approach.

Jeg kan i princippet være rystende ligeglad ... men det kan du nok ikke, da dine IE-brugere absolut ikke er det  ;o)

"IE sætter simpethen ikke en name-attribut på et form-element", burde der have stået. Det gælder alle form-elementer  :)

-- hvordan er det så med validiteten af den særdeles specielle måde at skabe et element ?-)

-- id-tingen ser jo ud til at virke gnidningsfrit !-)

Sålænge du kun gør det i IE, er der ingen problemer med validiteten ... det er faktisk, hvad MS selv anbefaler  :)

Dette eksempel viser i øvrigt endnu tydeligere problemerne:

<script type="text/JavaScript">
window.onload = function() {
    var inp = document.createElement("input");
    inp.name = "gnu";
    document.getElementById("hest").appendChild(inp);
}
</script>

<form id="hest" action="" method="post">
    <button type="submit">Send</button>
</form>

<button onclick="alert( document.getElementById('hest').elements['gnu'] )">TEST</button>
<button onclick="alert( document.getElementsByName('gnu').length )">TEST 2</button>

Men kanhænde, at man er interesseret i noget crossbrowser-agtigt ?-)

Helt rallende sindsyg bliver scenen dog, hvis man prøver denne kode:

<script type="text/JavaScript">
window.onload = function() {
    var inp = document.createElement("input");
    inp.name = "gnu";
    document.getElementById("hest").appendChild(inp);
}
</script>

<hr>
<?var_dump($_POST)?>
<hr>

<form id="hest" action="<?$_SERVER["PHP_SELF"]?>" method="post">
    <button type="submit">Send</button>
</form>

<button onclick="alert( document.getElementById('hest').elements['gnu'] )">TEST</button>
<button onclick="alert( document.getElementsByName('gnu').length )">TEST 2</button>

Hej Olebole

Det virker altså fint, hvis man bare skrive id'et med - altså: inp.id = "gnu";

Så funktionen bliver:

window.onload = function() {
    var inp = document.createElement("input");
    inp.name = "gnu";
    inp.id = "gnu";
    document.getElementById("hest").appendChild(inp);
}

Men ud over det, så kører min side perfekt i både IE og Firefox, så jeg er godt tilfreds :-D

*LooOooOooL* det er vist spildte ord på BalleLars, det her  :D

Nej, det virker ikke fint ... dit element har ikke en name-attribute. IE har fejl, men det nytter ikke, du bygger videre på dens fejl ... f.eks. at den har svært ved at finde rundt i ID og NAME  ;o)

En X-browser løsning ville være noget à la:

<script type="text/JavaScript">
function insInput(myName) {
    var ie, ua = navigator.userAgent.toLowerCase();
    ie = (ua.indexOf("msie")!=-1&&ua.indexOf("opera")==-1&&ua.indexOf("konqueror")==-1);
    var inp = document.createElement( (ie? "<input type=\"text\" name=\""+myName+"\">":"input") );
    inp.name = myName;
    document.getElementById("hest").appendChild(inp);
}

window.onload = function() {
    insInput("gnu");
}
</script>

<hr>
<?var_dump($_POST)?>
<hr>

<form id="hest" action="<?$_SERVER["PHP_SELF"]?>" method="post">
    <button type="submit">Send</button>
</form>

<button onclick="alert( document.getElementById('hest').elements['gnu'] )">TEST</button>
<button onclick="alert( document.getElementsByName('gnu').length )">TEST 2</button>

Tror du stadig, du gør noget rigtigt, kan du jo prøve at se, hvad MS selv skriver om problematikken:
    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/createelement.asp

Mjaaa ... nok nærmere:

function insInput(myName) {
    var ie, ua = navigator.userAgent.toLowerCase();
    ie = (ua.indexOf("msie")!=-1&&ua.indexOf("opera")==-1&&ua.indexOf("konqueror")==-1);
    var inp = document.createElement( (ie? "<input type=\"text\" name=\""+myName+"\">":"input") );
    inp.type = "text";
    inp.name = myName;
    document.getElementById("hest").appendChild(inp);
}

roenving - sidste spg. for i aften ;-)

Dit udmærkede script, som kører upåklageligt i begge browsere, er indstillet til at plusse en uge, men hvordan udbygget jeg scriptet så den der også kan "plusser med måneder" (altså en måned)?

Når du har indsat svaret, udbygger jeg scriptet, så brugeren kan vælge, om der skal plusse en uge til (som det pt. er) eller om der skal plusses en måned til. Årsagen er, at nogle arrangementer skal gentages hver uge (på en bestemt dag), mens andre arrangementer skal gentages hver måned på en bestemt dag.

Man kan jo desværre ikke bare sige plus 30 dage, fordi månederne ikke er lige lange. Kan du hjælpe her?

    var actDate = intSelects==0?new Date():new Date(f.elements["Date_Year"+intSelects].value, f.elements["Date_Month"+intSelects].selectedIndex, f.elements["Date_Day"+intSelects].selectedIndex + EN MÅNED);

Som du måske har opdaget, accepterer javascript en masse underligheder, således også i månedsparameteren, så du kan f.eks. sætte en parameter, som determinerer om det skal være den ene eller den anden, som tælles op, og så derudfra bestemme hvilken af Date-constructorens parametre, som tælles op:

  var isMonth = f.elements["isMonth"][1].checked;
/* baseret på, at du har to radios med navnet isMonth, hvor den første default er checket for ugentlig gentagelse, mens den anden kan kan checkes, hvis det er månedlig gentagelse */

var actDate = intSelects==0?new Date():new Date(f.elements["Date_Year"+intSelects].value, f.elements["Date_Month"+intSelects].selectedIndex + (isMonth?1:0), f.elements["Date_Day"+intSelects].selectedIndex + (isMonth?1:8));

-- og så er der faksiskt en hel del grund til at tage oles betragtninger alvorligt, for hvad aflæser du dine værdier med serverside ?-)

-- nogle serverside scriptingsprog har absolut behov for at have en name-attribut på form-elementer for at kunne aflæse dem !-)

Takker - jeg aflæser dem server-side... er dog ikke kommet til den del endnu, så det kan jo godt være at jeg får problemer der ;-)

Et lille side-sgp.

Hvordan kan jeg bruge onEvents i et dom-skabt element?

    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.id = 'Cancel_date' + intSelects;
    newCheck.onClick = 'alert("det virker")';
    mother.appendChild(newCheck);
    newCheck.checked = true;

Her bruger jeg onClick, men det virker ikke.

Jeg har prøvet at skrive:
    newCheck.onClick = alert("det virker");
Men så alert'er den lige så snart, at siden bliver indlæst.

Gør jeg noget forkert? Det virker hverken i IE eller Firefox.

Måske skal den også placeres efter append til moder-tingen, men ellers hedder det:

    newCheck.onclick = function(){
        'alert("det virker")';
      }

-- eller f.eks.

    newCheck.onClick = minFunktion;

-- hvor minFunktion er defineret et andet sted !-)

Hov:

    newCheck.onclick = function(){
        alert("det virker");
      }

Takker - kigger på det. Tilbage til måned-plusningen. Hos mig hopper den en måned frem, så d. 19. okt. 2005 bliver til d. 19. nov. 2005. Dog er d. 19. okt. en onsdag, mens den 19. nov. er en lørdag.

Den skulle gerne ramme den samme dag. Den første mandag i hver måned.

Er det mig, som har gjort noget forkert?

Næh, men den gør jo præcis hvad du har bedt den om, altså må du bede den om noget andet, og hvad er så det ?-)

-- den næste måneds 3. onsdag eller den onsdag, som i næste måned ligger tættest på ?o]

-- den kan ikke knækkes med logik, som holder under alle omstændigheder, man kan kun sætte den lige i nærheden, f.eks. optræder der jo engang imellem helligdage på en torsdag, skal den så springes over (eller aftenen før ?-) og hvis den skal, skal den så rykkes frem eller tilbage ...

-- så bliver det ikke een dobbelt radio-button, men 36, som skal indstilles !-)

Jeg tror, at følgende funktion kommer mig lidt til hjælp. Kigger på det i morgen.

    daysInMonth = new Array(12);
    daysInMonth[1] = 31;
    daysInMonth[2] = daysInFebruary(aaaa);
    daysInMonth[3] = 31;
    daysInMonth[4] = 30;
    daysInMonth[5] = 31;
    daysInMonth[6] = 30;
    daysInMonth[7] = 31;
    daysInMonth[8] = 31;
    daysInMonth[9] = 30;
    daysInMonth[10] = 31;
    daysInMonth[11] = 30;
    daysInMonth[12] = 31;

Det er ikke nok, for hvis I normalt holder møder i Akvarieklubben 'Fiskene drikker også' den 4. onsdag aften i måneden, men ikke gør det i påskeugen, da de fleste medlemmer alligevel er i sommerhus, samt den 22. og 23. december, hvordan skal man så ændre den anbefalede/default angivne dato ?-)

- man kan sætte event-handlers på elementet, så snart det er skabt - altså gerne før append. Det kan man faktisk med alle egenskaber - men man må naturligvis vente med at aflæse visuelle egenskaber som offsetWidth. Den slags giver først mening, når elementet er gjort til en del af siden  :)

Roenving - du har ret med måned-problematikken. Jeg har derfor lavet mit system om, så man kan vælge at plusse en uge eller fire uger og så må folk selv gå nogle dage længere frem, hvis de finder det relevant.

Men jeg har stadig ikke fået min onClick-event til at virke på check-element:

<script type="text/javascript">

var intSelects = 0;

function appendSelect(f){

    if (intSelects == 0) {
        var isMonth = false;
    }
    else {
        var isMonth = f.elements["isMonth"][1].checked;   
    }

    var actDate = intSelects==0?new Date():new Date(f.elements["Date_Year"+intSelects].value, f.elements["Date_Month"+intSelects].selectedIndex, f.elements["Date_Day"+intSelects].selectedIndex + (isMonth?1:8) + (isMonth?28:0));
   
    intSelects++;
   
    var thisDay = actDate.getDate();
    var thisMonth = actDate.getMonth();
    var thisYear = actDate.getFullYear();
     
    var dash = document.createTextNode(" ");
    var mother = document.getElementById('motherDiv');
   
    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.id = 'Cancel_date' + intSelects;   
    newCheck.onClick = doCheck;
    //newCheck.onClick = function() { 'alert("det virker1")'; }
    mother.appendChild(newCheck);
    //newCheck.onClick = function() { 'alert("det virker2")'; }

    newCheck.checked = true;

    //newCheck.onChange = function() { 'alert("det virker3")'; }

    dash = dash.cloneNode(true);
    mother.appendChild(dash);

    dash = dash.cloneNode(true);
    mother.appendChild(dash);

    var newSel = document.createElement("SELECT"); 
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Day' + intSelects;
    newSel.id = 'Date_Day' + intSelects;
    mother.appendChild(newSel);

    for(i=1;32>i;i++){
        newSel.options[newSel.length] = new Option(i, i);
    }
 
    newSel.selectedIndex = thisDay - 1;

    mother.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Month' + intSelects;
    newSel.id = 'Date_Month' + intSelects;
    mother.appendChild(newSel);
       
    var mName = ['','januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december'];
    for(i=1;13>i;i++){
        newSel.options[newSel.length] = new Option(mName[i],i);
    }
 
    newSel.selectedIndex = thisMonth;

    dash = dash.cloneNode(true);
    mother.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Year' + intSelects;
    newSel.id = 'Date_Year' + intSelects;
    mother.appendChild(newSel);

    //3 år frem i tiden
    for(i=0;3>i;i++){
        newSel.options[newSel.length] = new Option(thisYear + i, thisYear + i);
    }
 
    newSel.selectedIndex = 0;
   
    var newLine = document.createElement("BR");
    mother.appendChild(newLine);

    var newLine = document.createElement("BR");
    mother.appendChild(newLine);
             
}

function doCheck() {

    alert("Nu virker det altså");
}

roenving >>

Kunne du hjælpe mig den onClick-ting? :-)

En forkortelse:

    var actDate = intSelects==0?new Date():new Date(f.elements["Date_Year"+intSelects].value, f.elements["Date_Month"+intSelects].selectedIndex, f.elements["Date_Day"+intSelects].selectedIndex + (isMonth?29:8));

-- onclick'en kigger jeg på senere, hvis jeg får tid ...

-- bemærk, at du _altid_ bør bruge ene små bogstaver i attributter ...

>>isMonth?29:8
opdateret

>>ene små bogstaver i attributter.
Ok, men hvorfor? Det virker jo fint i begge browsere. Hvad er forklaringen?

>>onClick
Super, afventer spændt ;-)

Fordi de kommende udgaver af html-standarderne ikke tillader store bogsteaver !-)

ok, takker :-)

For resten - hvordan laver man et div-object inde i det eksisterende motherdiv? Altså også via DOM.

document.createTextNode("div") ???

Neiiii

createElement !-)

Øv, en div laver et liniebreak :-)... nå, må forsøge at lave et på en anden måde.

En span ?-)

Blot:

    newDiv = document.createElement("div");
    newDiv.id = 'day_name' + intSelects;
    mother.appendChild(newDiv);

Og hvordan smider man noget tekst ind i en div?

Jeg er helt lost på DOM-området.

var divTxt = document.createTextNode("Noget Text");
newDiv.appendChild(divTxt);

Takkker, og hvordan laver man en tabel og fylde 3 celler ind i den?

Du laver et element med:
    var newElement = document.createElement("TAG_NAME");

Attributter kan du altid sætte med:
    newElement.setAttribute("ATTRIBUTE_NAME", "ATTRIBUTE_VALUE");

Tekst fylder du i elementet med:
    var txt = document.createTextNode("EN_TEKST");
    newElement.appendChild(txt);

Derefter klistrer du det nye element ind i det element, det skal ligge i:
    ELEMENT.appendChild(newElement);

Altså laver du først et table-element.
I det lægger du et tbody-element.
I det lægger du et tr-element.
I det lægger du et td-element, som du fylder tekst i.
Den sidste operation foretager du to gange mere.
table-elementet klistrer du ind i det element, det skal ligge i.

Kik evt. i de andre DOM-eksempler i tråden her. Du skal jo lære det på et tidspunkt ... en regnvejrsdag er vel ikke det værste  ;o)

Så skal du lidt længere rundt, da td-tags er børn af tr-tags, som er børn af tbody, som er barn af table-taggget, altså skal du først oprette table-elementet, derefter tbody-elementet og appende det til table-elementet, oprette et tr-element, som appendes til tbody-elementet, og til sidst oprette 3 td-elementer, som appendes til tr-elementet !-)

- her kommer så i øvrigt en lille rettelse til, hvad roenving skrev tidligere om attributter og små bogstaver:
I den HTML bør alle attributter skrives med småt - hvilket også gælder event-handlers.

Når man scripter disse attributter, skal de nogen gange skrives i 'camelCase' for at virke. Et eksempel er:
  td = document.createElement("td");
  td.colspan = 2;
- hvilket ikke vil virke. Det vil derimod:
  td = document.createElement("td");
  td.colSpan = 2;

Nu, da du har fat i DOM, er det dog slet ikke måden at sætte attributter på. Til alle attributter - undtagen event-handlers - bør du faktisk bruge setAttribute-metoden  :)

Når du sætter event-handlers, bør du - som roenving skrev - _altid_ skrive navnet med småt.

Takker :-)

Hymmm.. der kommer ikke noget til syne. Og skal man ikke længere lukke et tag?

    newTabel = document.createElement("TABEL");
    newTabel.width = "100%"
    newTabel.border = "1px"
    mother.appendChild(newTabel);

    newTBody = document.createElement("TBODY");
    mother.appendChild(newTBody);
   
    newTR = document.createElement("TR");
    mother.appendChild(newTR);
   
    newTD = document.createElement("TD");
    //første celle
    mother.appendChild(newTD);
    //anden celle
    mother.appendChild(newTD);
    //tredje celle
    mother.appendChild(newTD);

Du har overset, at de ligger i et hierarki _inde i_ tabellen, så f.eks.

    newTBody = document.createElement("TBODY");
    newTabel.appendChild(newTBody);

Takker, hermed gjort. Stadig intet synligt.

    newTabel = document.createElement("TABEL");
    newTabel.width = "100%"
    newTabel.border = "1px"
    mother.appendChild(newTabel);

    newTBody = document.createElement("TBODY");
    newTabel.appendChild(newTBody);
   
    newTR = document.createElement("TR");
    newTBody.appendChild(newTR);
   
    newTD = document.createElement("TD");
    //første celle
    newTR.appendChild(newTD);
    //anden celle
    newTR.appendChild(newTD);
    //tredje celle
    newTR.appendChild(newTD);

-- du skulle måske sætte style-properties på style-objektet:

    newTabel.style.width = "100%";
    newTabel.style.border = "1px solid black";

Stadig intet synligt

    newTabel = document.createElement("TABEL");
    newTabel.style.width = "100%";
    newTabel.style.border = "1px solid black";
    mother.appendChild(newTabel);

    newTBody = document.createElement("TBODY");
    newTabel.appendChild(newTBody);
   
    newTR = document.createElement("TR");
    newTBody.appendChild(newTR);
   
    newTD = document.createElement("TD");
    //første celle
    newTR.appendChild(newTD);
    //anden celle
    newTR.appendChild(newTD);
    //tredje celle
    newTR.appendChild(newTD);

Har jeg forstået det rigtigt, at man ikke længere skal afslutte et tag, når man bruger DOM?

Du laver et fuldt element, hvilket betyder, at behøver det element også et sluttag, findes det også !-)

ok

Den store ulempe med DOM er, at man ikke kan se sit output, før alt er tæt på korrekt, og det gør, at man - som jeg - famler i blinde, da jeg intet kan se.

-- og du kan ikke appende det samme element flere gange, du skal klone det først (ligesom med dash-tingen tidligere !-)

Øeh, TABEL-elementet ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;}
</style>
<script type="text/javascript">
function insertTable(){
  var mother = document.getElementById('minDiv');
    var  newTabel = document.createElement("TABLE");
    newTabel.style.width = "100%";
    newTabel.style.border = "1px solid black";
    mother.appendChild(newTabel);

    var newTBody = document.createElement("TBODY");
    newTabel.appendChild(newTBody);
   
    var newTR = document.createElement("TR");
    newTBody.appendChild(newTR);
   
    //første celle
    var newTD = document.createElement("TD");
    newTD.style.height = "35px";
    var newTDText = document.createTextNode("Her er en tekst, som ligger i en tabelcelle");
    newTD.appendChild(newTDText);
    newTR.appendChild(newTD);
    //anden celle
    newTD = newTD.cloneNode(newTD,true);
    newTR.appendChild(newTD);
    //tredje celle
    newTD = newTD.cloneNode(newTD,true);
    newTR.appendChild(newTD);
}
</script>
<title>Se forskellen i IE css-fortolkning</title>
</head>
<body>
<div id="minDiv" style="width:500px;height:200px;border:50px solid red;background:blue;margin:0 auto;">&nbsp;</div>
<button onclick="insertTable()">Indsæt tabel</button><br>
<button onclick="alert(document.body.innerHTML)">Vis indhold</button>
</body>
</html>

Du er bare så sej :-)

Takker mange gange, nu er jeg vist selvkørende de næste hele 2 min ;-)

Bemærk iøvrigt anden-parameteren i cloneNode, som betyder, at alt indhold også klones med, altså behøver vi ikke klone newTDText selvstændigt !-)

-- iøvrigt henviser titlen i eksemplet til, at jeg lige kastede de ekstra ting ind i et eksempel på IEs mærkværdige understøttelse af css, hvis man udelader dtd-linket, så der kan du lige få en oplevelse mere med, hvis du prøver at vise siden efter at have slettet dtd-linket i doctypen !o]

Hymm.. det hele ender i den første celle - hvorfor?

function appendSelect(f){
 
    var isMonth = intSelects==0?false:f.elements["isMonth"][1].checked;
    var actDate = intSelects==0?new Date():new Date(f.elements["Date_Year"+intSelects].value, f.elements["Date_Month"+intSelects].selectedIndex, f.elements["Date_Day"+intSelects].selectedIndex + (isMonth?29:8));
       
    var thisDay = actDate.getDate();
    var thisMonth = actDate.getMonth();
    var thisYear = actDate.getFullYear();
   
    //var strDayName = intSelects==0?getDayName(thisDay + "/" + thisMonth + "-" + thisYear):getDayName(f.elements["Date_Day" + intSelects].value + "/" + f.elements["Date_Month" + intSelects].value + "-" + f.elements["Date_Year" + intSelects].value);
    var thisDayName = getDayName(thisDay + "/" + thisMonth + "-" + thisYear);
   
      //bør egentlig stå til sidst i funktionen...
      intSelects++;
     
    var dash = document.createTextNode(" ");
    var mother = document.getElementById('motherDiv');
   
    var newTabel = document.createElement("TABLE");
    newTabel.style.width = "100%";
    newTabel.style.border = "1px solid black";
    mother.appendChild(newTabel);

    var newTBody = document.createElement("TBODY");
    newTabel.appendChild(newTBody);
 
    var newTR = document.createElement("TR");
    newTBody.appendChild(newTR);
 
    var newTD = document.createElement("TD");
    newTD.style.height = "35px";   
   
    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.id = 'Cancel_date' + intSelects;   

    newTD.appendChild(newCheck);
   
    newCheck.checked = true;
   
    // ************** 1. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);       
   
    newDiv = document.createElement("div");
    newDiv.id = 'day_name' + intSelects;
    newTD.appendChild(newDiv);   
       
    var divTxt = document.createTextNode(thisDayName);
    newDiv.appendChild(divTxt);
   
    // ************** 2. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);       
   
    var newSel = document.createElement("SELECT"); 
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Day' + intSelects;
    newSel.id = 'Date_Day' + intSelects;
    newTD.appendChild(newSel);

    for(i=1;32>i;i++){
        newSel.options[newSel.length] = new Option(i, i);
    }
 
    newSel.selectedIndex = thisDay - 1;

    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Month' + intSelects;
    newSel.id = 'Date_Month' + intSelects;
    newTD.appendChild(newSel);
       
    var mName = ['','januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december'];
    for(i=1;13>i;i++){
        newSel.options[newSel.length] = new Option(mName[i],i);
    }
 
    newSel.selectedIndex = thisMonth;

    dash = dash.cloneNode(true);
    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Year' + intSelects;
    newSel.id = 'Date_Year' + intSelects;
    newTD.appendChild(newSel);

    //3 år frem i tiden
    for(i=0;3>i;i++){
        newSel.options[newSel.length] = new Option(thisYear + i, thisYear + i);
    }
 
    newSel.selectedIndex = 0;
   
    // ************** 3. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);       

}

Fordi du glemmer at bruge cloneNode, før du genbruger td'en ...

Du skal sikkert bruge .cloneNode(newTD,false); så indholdet ikke klones med !-)

Hymm... ingen forskel... to kloner er indsat:

function appendSelect(f){
 
    var isMonth = intSelects==0?false:f.elements["isMonth"][1].checked;
    var actDate = intSelects==0?new Date():new Date(f.elements["Date_Year"+intSelects].value, f.elements["Date_Month"+intSelects].selectedIndex, f.elements["Date_Day"+intSelects].selectedIndex + (isMonth?29:8));
       
    var thisDay = actDate.getDate();
    var thisMonth = actDate.getMonth();
    var thisYear = actDate.getFullYear();

    //var strDayName = intSelects==0?getDayName(thisDay + "/" + thisMonth + "-" + thisYear):getDayName(f.elements["Date_Day" + intSelects].value + "/" + f.elements["Date_Month" + intSelects].value + "-" + f.elements["Date_Year" + intSelects].value);
    var thisDayName = getDayName(thisDay + "/" + thisMonth + "-" + thisYear);
   
    //bør egentlig stå til sidst i funktionen...
      intSelects++;   
     
    var dash = document.createTextNode(" ");
    var mother = document.getElementById('motherDiv');
   
    var newTabel = document.createElement("TABLE");
    newTabel.style.width = "100%";
    newTabel.style.border = "1px solid black";
    mother.appendChild(newTabel);

    var newTBody = document.createElement("TBODY");
    newTabel.appendChild(newTBody);
 
    var newTR = document.createElement("TR");
    newTBody.appendChild(newTR);
 
    var newTD = document.createElement("TD");
    newTD.style.height = "35px";   
   
    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.id = 'Cancel_date' + intSelects;   

    newTD.appendChild(newCheck);
   
    newCheck.checked = true;
   
    // ************** 1. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);       
   
    newDiv = document.createElement("div");
    newDiv.id = 'day_name' + intSelects;
    newTD.appendChild(newDiv);   
       
    var divTxt = document.createTextNode(thisDayName);
    newDiv.appendChild(divTxt);
   
    // ************** 2. CELLE AFSLUTNING ***********************
    newTD.cloneNode(newTD,false);
    newTR.appendChild(newTD);       
   
    var newSel = document.createElement("SELECT"); 
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Day' + intSelects;
    newSel.id = 'Date_Day' + intSelects;
    newTD.appendChild(newSel);

    for(i=1;32>i;i++){
        newSel.options[newSel.length] = new Option(i, i);
    }
 
    newSel.selectedIndex = thisDay - 1;

    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Month' + intSelects;
    newSel.id = 'Date_Month' + intSelects;
    newTD.appendChild(newSel);
       
    var mName = ['','januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december'];
    for(i=1;13>i;i++){
        newSel.options[newSel.length] = new Option(mName[i],i);
    }
 
    newSel.selectedIndex = thisMonth;

    dash = dash.cloneNode(true);
    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Year' + intSelects;
    newSel.id = 'Date_Year' + intSelects;
    newTD.appendChild(newSel);

    //3 år frem i tiden
    for(i=0;3>i;i++){
        newSel.options[newSel.length] = new Option(thisYear + i, thisYear + i);
    }
 
    newSel.selectedIndex = 0;
   
    // ************** 3. CELLE AFSLUTNING ***********************
    newTD.cloneNode(newTD,false);
    newTR.appendChild(newTD);

}

Du skal selvfølgelig klone den, før du indsætter det nye indhold !-)

// ************** 1. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);       
   
    newTD.cloneNode(newTD,false);

    newDiv = document.createElement("div");
    newDiv.id = 'day_name' + intSelects;
    newTD.appendChild(newDiv);   
       
    var divTxt = document.createTextNode(thisDayName);
    newDiv.appendChild(divTxt);
   
    // ************** 2. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);

Det virker stadig ikke. Du flyttede "newTD.cloneNode(newTD,false);" fra 1. celle-afslutningen til 2. celle afslutningen.

function appendSelect(f){
 
    var isMonth = intSelects==0?false:f.elements["isMonth"][1].checked;
    var actDate = intSelects==0?new Date():new Date(f.elements["Date_Year"+intSelects].value, f.elements["Date_Month"+intSelects].selectedIndex, f.elements["Date_Day"+intSelects].selectedIndex + (isMonth?29:8));
       
    var thisDay = actDate.getDate();
    var thisMonth = actDate.getMonth();
    var thisYear = actDate.getFullYear();

    //var strDayName = intSelects==0?getDayName(thisDay + "/" + thisMonth + "-" + thisYear):getDayName(f.elements["Date_Day" + intSelects].value + "/" + f.elements["Date_Month" + intSelects].value + "-" + f.elements["Date_Year" + intSelects].value);
    var thisDayName = getDayName(thisDay + "/" + thisMonth + "-" + thisYear);
   
    //bør egentlig stå til sidst i funktionen...
      intSelects++;   
     
    var dash = document.createTextNode(" ");
    var mother = document.getElementById('motherDiv');
   
    var newTabel = document.createElement("TABLE");
    newTabel.style.width = "100%";
    newTabel.style.border = "1px solid black";
    mother.appendChild(newTabel);

    var newTBody = document.createElement("TBODY");
    newTabel.appendChild(newTBody);
 
    var newTR = document.createElement("TR");
    newTBody.appendChild(newTR);
 
    var newTD = document.createElement("TD");
    newTD.style.height = "35px";   
   
    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.id = 'Cancel_date' + intSelects;   

    newTD.appendChild(newCheck);
   
    newCheck.checked = true;
   
    // ************** 1. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD); 
    newTD.cloneNode(newTD,false);

    newDiv = document.createElement("div");
    newDiv.id = 'day_name' + intSelects;
    newTD.appendChild(newDiv); 
     
    var divTxt = document.createTextNode(thisDayName);
    newDiv.appendChild(divTxt);
 
    // ************** 2. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);
   
    var newSel = document.createElement("SELECT"); 
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Day' + intSelects;
    newSel.id = 'Date_Day' + intSelects;
    newTD.appendChild(newSel);

    for(i=1;32>i;i++){
        newSel.options[newSel.length] = new Option(i, i);
    }
 
    newSel.selectedIndex = thisDay - 1;

    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Month' + intSelects;
    newSel.id = 'Date_Month' + intSelects;
    newTD.appendChild(newSel);
       
    var mName = ['','januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december'];
    for(i=1;13>i;i++){
        newSel.options[newSel.length] = new Option(mName[i],i);
    }
 
    newSel.selectedIndex = thisMonth;

    dash = dash.cloneNode(true);
    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Year' + intSelects;
    newSel.id = 'Date_Year' + intSelects;
    newTD.appendChild(newSel);

    //3 år frem i tiden
    for(i=0;3>i;i++){
        newSel.options[newSel.length] = new Option(thisYear + i, thisYear + i);
    }
 
    newSel.selectedIndex = 0;
   
    // ************** 3. CELLE AFSLUTNING ***********************
    newTD.cloneNode(newTD,false);
    newTR.appendChild(newTD);

}

Sorry:

Du flyttede "newTD.cloneNode(newTD,false);" fra 1. celle-afslutningen til 2. celle afslutningen.

Rettes til:

Du flyttede "newTD.cloneNode(newTD,false);" fra 2. celle-afslutningen til 1. celle afslutningen.

Du kloner jo heller ikke før du indsætter de tre dato-selects ?-)

Virker stadig ikke. Jeg har dog heller ikke check på kloningen endnu, så jeg forsøger mig frem:

function appendSelect(f){
 
    var isMonth = intSelects==0?false:f.elements["isMonth"][1].checked;
    var actDate = intSelects==0?new Date():new Date(f.elements["Date_Year"+intSelects].value, f.elements["Date_Month"+intSelects].selectedIndex, f.elements["Date_Day"+intSelects].selectedIndex + (isMonth?29:8));
       
    var thisDay = actDate.getDate();
    var thisMonth = actDate.getMonth();
    var thisYear = actDate.getFullYear();

    //var strDayName = intSelects==0?getDayName(thisDay + "/" + thisMonth + "-" + thisYear):getDayName(f.elements["Date_Day" + intSelects].value + "/" + f.elements["Date_Month" + intSelects].value + "-" + f.elements["Date_Year" + intSelects].value);
    var thisDayName = getDayName(thisDay + "/" + thisMonth + "-" + thisYear);
   
    //bør egentlig stå til sidst i funktionen... men nu er det forsent ;-)
      intSelects++;   
     
    var dash = document.createTextNode(" ");
    var mother = document.getElementById('motherDiv');
   
    var newTabel = document.createElement("TABLE");
    newTabel.style.width = "100%";
    newTabel.style.border = "1px solid black";
    mother.appendChild(newTabel);

    var newTBody = document.createElement("TBODY");
    newTabel.appendChild(newTBody);
 
    var newTR = document.createElement("TR");
    newTBody.appendChild(newTR);
 
    var newTD = document.createElement("TD");
    newTD.style.height = "35px";
   
    newTD.cloneNode(newTD,false); 
   
    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.id = 'Cancel_date' + intSelects;   

    //newTD.appendChild(newCheck);
   
    newCheck.checked = true;
   
    // ************** 1. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD); 
    newTD.cloneNode(newTD,false);

    newDiv = document.createElement("div");
    newDiv.id = 'day_name' + intSelects;
    newTD.appendChild(newDiv); 
     
    var divTxt = document.createTextNode(thisDayName);
    newDiv.appendChild(divTxt);
 
    // ************** 2. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);
    //newTD.appendChild(newCheck);
   
    var newSel = document.createElement("SELECT"); 
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Day' + intSelects;
    newSel.id = 'Date_Day' + intSelects;
    newTD.appendChild(newSel);

    for(i=1;32>i;i++){
        newSel.options[newSel.length] = new Option(i, i);
    }
 
    newSel.selectedIndex = thisDay - 1;

    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Month' + intSelects;
    newSel.id = 'Date_Month' + intSelects;
    newTD.appendChild(newSel);
       
    var mName = ['','januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december'];
    for(i=1;13>i;i++){
        newSel.options[newSel.length] = new Option(mName[i],i);
    }
 
    newSel.selectedIndex = thisMonth;

    dash = dash.cloneNode(true);
    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Year' + intSelects;
    newSel.id = 'Date_Year' + intSelects;
    newTD.appendChild(newSel);

    //3 år frem i tiden
    for(i=0;3>i;i++){
        newSel.options[newSel.length] = new Option(thisYear + i, thisYear + i);
    }
 
    newSel.selectedIndex = 0;
   
    // ************** 3. CELLE AFSLUTNING ***********************
    newTD.cloneNode(newTD,false);
    newTR.appendChild(newTD);

}

Et par småfejl hist og pist

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;}
</style>
<script type="text/javascript">
var intSelects = 0;
function appendSelect(f){
 
    var isMonth = intSelects==0?false:f.elements["isMonth"][1].checked;
    var actDate = intSelects==0?new Date():new Date(f.elements["Date_Year"+intSelects].value, f.elements["Date_Month"+intSelects].selectedIndex, f.elements["Date_Day"+intSelects].selectedIndex + (isMonth?29:8));
       
    var thisDay = actDate.getDate();
    var thisMonth = actDate.getMonth();
    var thisYear = actDate.getFullYear();

    var thisDayName = getDayName(actDate);
   
    //bør egentlig stå til sidst i funktionen... men nu er det forsent ;-)
      intSelects++;   
     
    var dash = document.createTextNode(" ");
    var mother = document.getElementById('motherDiv');
   
    var newTabel = document.createElement("TABLE");
    newTabel.style.width = "100%";
    newTabel.style.border = "1px solid black";
    mother.appendChild(newTabel);

    var newTBody = document.createElement("TBODY");
    newTabel.appendChild(newTBody);
 
    var newTR = document.createElement("TR");
    newTBody.appendChild(newTR);
 
    var newTD = document.createElement("TD");
    newTD.style.height = "35px";
       
    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.id = 'Cancel_date' + intSelects;   

    newTD.appendChild(newCheck);
   
    newCheck.checked = true;
   
    // ************** 1. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD); 

    // ************** 2. CELLE Start ****************************   
    newTD = document.createElement("TD");

    newDiv = document.createElement("div");
    newDiv.id = 'day_name' + intSelects;
    newTD.appendChild(newDiv); 
     
    var divTxt = document.createTextNode(thisDayName);
    newDiv.appendChild(divTxt);
 
    // ************** 2. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);

    // ************** 3. CELLE Start ****************************   
    newTD = document.createElement("TD");

    var newSel = document.createElement("SELECT"); 
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Day' + intSelects;
    newSel.id = 'Date_Day' + intSelects;
    newTD.appendChild(newSel);

    for(i=1;32>i;i++){
        newSel.options[newSel.length] = new Option(i, i);
    }
 
    newSel.selectedIndex = thisDay - 1;

    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Month' + intSelects;
    newSel.id = 'Date_Month' + intSelects;
    newTD.appendChild(newSel);
       
    var mName = ['','januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december'];
    for(i=1;13>i;i++){
        newSel.options[newSel.length] = new Option(mName[i],i);
    }
 
    newSel.selectedIndex = thisMonth;

    dash = dash.cloneNode(true);
    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.size = '1';
    newSel.className = 'inputbox';
    newSel.name = 'Date_Year' + intSelects;
    newSel.id = 'Date_Year' + intSelects;
    newTD.appendChild(newSel);

    //3 år frem i tiden
    for(i=0;3>i;i++){
        newSel.options[newSel.length] = new Option(thisYear + i, thisYear + i);
    }
 
    newSel.selectedIndex = 0;
   
    // ************** 3. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);
}

function getDayName(dato) {
    strDays = new Array("Søndag","Mandag","Tirsdag","Onsdag","Torsdag","Fredag","Lørdag");
    return strDays[dato.getDay()];
}

</script>
<title>Se forskellen i IE css-fortolkning</title>
</head>
<body>
<form>
Opdater med:<br>
Uge: <input name="isMonth" type="radio" checked><br>
Måned: <input name="isMonth" type="radio"><br>
<div id="motherDiv"></div>
<button onclick="appendSelect(this.form);">Indsæt tabel</button><br>
<button onclick="alert(document.body.innerHTML)">Vis indhold</button>
</form>
</body>
</html>

Takker mange mange gange :-D

I brugte cloneNode-metoden forkert  :)

Den modtager kun ét argument: en boolean, der afgør, om evt. child-elementer også skal klones:
    var newElement = ELEMENT.cloneNode(true);  // Eller false, forståes  :)

Desuden skal I stadigvæk huske, at tag-navnet i createElement-metoden _skal_ skrives med småt  ;o)

Desuden holder løsningen da vist ikke en halv meter ... eller? Det er vel ikke meningen, man kun skal kunne indsætte én tabel?

Du har vist nu problemer, fordi du ikke tog min advarsel alvorlig tidligere i tråden. Hvis du opretter mere end én tabel, vil du have flere elementer med samme ID, men uden name-attributter og ...

1. Det er ikke tilladt
2. Det kan ikke anvendes sammen med JavaScript på klienten
3. Du kan ikke bruge felterne til noget på serveren

DOH, cloneNode havde jeg jo egentlig brugt korrekt først ...

-- der kommer da ikke flere elementer med samme id ...

-- alle form-elementer har forskellige id'er, men det løser selvfølgelig ikke problematiken med den server-site behandling, men det kan i hvert fald brruges client-side ...

--og *lol*, axkris afviste jo netop bekymringen i første omgang, for først skulle han lige have fod på oprettelsen client-side, men det kommer jo nok tilbage på et tidspunkt !-)

Sorry ... ingen ulovlige ID'er ... my bad  :)
Ja, det ville nok have været bedst at få styr på klientsiden først, så - men det er nok et spørgsmål om definitionen af 'styr på'  ;o)

- men ville man mon ikke spare en bunke kode, hvis man oprettede en tabel som den ønskede med style="display:none"? Så kunne man klone hele den og skifte et par navne ud - og klistre den ind i div'et.

Større DOM-opbygninger kan let løbe op i meget store kodemængder. Her er det som oftest en kæmpe fordel at lave en simpel template-løsning  :)

Om det er tilladt eller ej er jeg lidt ligeglad med, hvis bare det kører i begge browsere - IE og Firefox - og det gør det. Og jeg er ikke spor bekymret vedr. dom-name-tingen failer i IE (og man derfor ikke kan hente værdierne fra server-siden), fordi jeg samler bare dato-værdierne ind i som en hidden-value, som er ikke er DOM-skabt, og så burde det være løst. Hvis ikke det er det, så er der så mange andre muligheder at løse det på.

Mht. små bogstaver, som kræves ved den kommende html-standard, så er jeg også lidt lige glad med det, fordi browseren jo altid er voldsomt bagudkombatible. Og skulle det en dag ikke længere være det, så sætter jeg med gerne ned, at fornyer de steder i min kode, som er forældede. Til den tid har jeg sikkert skiftet hele scriptet ud alligevel.

aha ... ja, så tror jeg ikke, jeg kan bidrage med noget somhelst  :)

- det med små bogstaver gælder nu ikke bare i kommende HTML-standarder, men i de allerede gældende ... men hvis intet andet betyder noget, så gør det sikkert heller ikke  :)

Alt kører, som det skal, men jeg kan ikke få gang i onClick-events, som jeg tidligere har været inde på. Jeg har prøvet alle mulige og umulige kommandoer og kombinationer og jeg har prøvet at finde noget dokumentation om det på nettet, men intet er lykkedes.

Så onEvents virker stadig ikke for mig. Jeg kigger videre på nettet efter et eksempel.

Gad vide om ikke jeg har fundet noget her: http://www.brainjar.com/dhtml/events/default2.asp

No, virker heller ikke:

    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.id = 'Cancel_date' + intSelects; 
    // ONCLICK VIRKER IKKE!!!
    //newCheck.onClick = function() { alert("Test 1 2 3"); }
    newCheck.addEventListener("onclick", alert('virker'), true);

    newTD.appendChild(newCheck);
 
    newCheck.checked = true;

Det er ikke uden grund, du gang på gang bliver opfordret til at skrive ordentlig kode ... og det er ikke uden grund, at både roenving og jeg tidligere i tråden begge understregede vigtigheden af, at skrive event-handlers med småt ... like it or not  ;o)
    newCheck.onclick = function() { alert("Test 1 2 3") };

- så jazzer det sikkert fint  :)

Så kan jeg lære det, kan jeg... det virker ... takker :-D

Nu bliver jeg helt nysgerrig. Hvorfor beslutter "man", efter at have accepteret store bogstaver i så lang tid, at man ikke længere vil anvende dem i DOM og i kommende html-standarder?

Hymm... hvorfor kan man ikke "checke" (afkrydse) et element i IE, det virker dog fint i FireFox.

    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.id = 'Cancel_date' + intSelects; 
    newCheck.onclick = function() { alert("Test 1 2 3"); }
    newTD.appendChild(newCheck);

    newCheck.checked = true;

... altså hvorfor kan man ikke lade det være checked (i IE) fra starten af, når siden indlæses?

Når siden indlæses ?-)

... er det intet kryds i IE... men det er det i Firefox. Ingen fejl-meddeleser i IE.

Nu siger IE "not implemented" til:

    newCheck.onclick = doCancelEvent("en eller anden tæller");

Kode:

    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.id = 'Cancel_date' + intSelects; 
    newCheck.onclick = doCancelEvent("en eller anden tæller");
    newTD.appendChild(newCheck);

    function doCancelEvent(tester) {

    form = document.frmUser;
   
    alert(tester);
   
  }

I Firefox virker det fint, men i IE skoder den. IE kan dog (selvom den kommer med fejlmeddelelsen) godt udskrive tester-værdien.

Hvis du skal overføre parametre skal du bruge anonyme funktioner, f.eks.

    newCheck.onclick = function(){doCancelEvent("en eller anden tæller");};

Takker

Ved I hvordan man indsætter en værdi af en streng som et paramenter og ikke blot en reference til den (strengen)?

Problemet ligger i:

    newSel.onclick = function () { updateDayName(intSelects); }

hvor der indsættes en reference (til intSelects) og ikke selv værdien (af intSelects), som den var, da elementet blev appended. Og derved udskriver den fejlagten tællerens værdi og ikke væriden, som hver sæt af dropdown-boxene har fået tildelt.

Så hvordan tvinger man den til at indskrive værdien (i stedet for referencen)?

Kode:
    var newSel = document.createElement("SELECT");
    newSel.className = 'inputbox';
    newSel.name = 'Date_Day' + intSelects;
    newSel.id = 'Date_Day' + intSelects;
    newSel.onclick = function () { updateDayName(intSelects); }
    newTD.appendChild(newSel);

>> roenving og olebole
Se lige: http://www.eksperten.dk/spm/633786

Så skal du nok igennem en mellemvariabel:

    newSel.id = 'Date_Day' + intSelects;
    var num = intSelects;
    newSel.onclick = function () { updateDayName(num); }

Til spørgsmålet (20/07-2005 09:40:02):

Jeg har jo mere lyst til at spørge: Hvorfor i alverden skal der dog gå _så_ ufattelig lang tid, før folk finder ud af, hvad der har været gældende standard i årevis?
I betragtning af, hvor stædigt du hele tråden igennem har nægtet at skrive tidssvarende kode, kan jeg vel egentlig ikke finde en bedre at spørge  ;o)

I 1895 kunne enhver, der kunne håndtere en knibtang, nedsætte sig som tandlæge.
I 1995 kunne enhver, der kunne håndtere Notepad, nedsætte sig som websmed.
I 2005 har begge dele udviklet sig til 'fuldvoksne' fag, der ikke længere kan bestrides af enhver ... og det er vel den måde, de fleste fag bliver til og udvikler sig på.

Man kender det i øvrigt også fra andre, 'rigtige' sprog. Da mine forældre var børn, lærte de at skrive 'd' i 'ville' og 'skulle' ('vilde' og 'skulde').
Da jeg var barn, skulle vi skrive 'd' i 'væske' ('vædske') - da det jo kommer af 'væde' ... og det hed 'roastbeef' og 'mayonaise', hvor man i dag må skrive 'rostbøf' og 'majonæse'.

Den eneste forskel er, at web-sprogene bliver mere stringente - hvorimod dansk bliver mere sloppy.
Er man rimeligt god til 'rigtige' sprog, er det en kæmpe fordel med mange af de 'gamle', danske stavemåder, da men let kan regne ud, hvor et ord kommer fra - hvordan det staves - og hvad det præcist betyder. Stringens forøger et sprogs logik væsentligt.

Et 'rigtigt' sprog bør naturligvis kunne håndteres af alle borgere - også de mest sprogretarderede - hvorfor det desværre bevæger sig imod, at man staver ord, som de udtales ... men samtidig mister vi sammenhæng i sproget.

Et websprog er der derimod ikke længere grund til, alle kan mestre.
HTML blev født som et hamrende simpelt paragraf- og tabelværk til opstilling af videnskabelige måledata. Det samme kan idag gøres med CMS'er - og det egentlige udviklings- og kodearbejde kan overlades til dygtige fagfolk, der kan deres fag ... samtidig med, sprogene kan forfines og semantik/syntaks gøres mere robust.

Det er vist bare en naturlig udvikling  :)

>>ole

-- var det ikke mayonnaise ?-)

- damned ...!!! Endnu en rød streg på skærmen  :o|
Du har da fuldstændig ret, roenving. Hvad var det, jeg skrev? Bare der er logik i sproget ...  *LooOooL*

Der er nok en årsag eller fem til, at jeg koder - og ikke skriver lyrik. Selv i et liv som mit er der zq nok alligevel rudimenter af sammenhæng  ;D

Dur desværre ikke:

    newSel.id = 'Date_Day' + intSelects;
    var num = intSelects;
    newSel.onclick = function () { updateDayName(num); }

Kan man ikke i stedet gøre noget lignende??

    newSel.onclick = function () { updateDayName(write intSelects); }

Det skal fungere  :)
Hvad sker der, hvis du alert'er argumentet i funktionen 'updateDayName'? Altså noget à la:

function updateDayName(num) {
    alert(num);
  ... osv, osv ...

Det gør det sørme også - min fejl

Men indrøm det ;-) det er den en mindre pæn måde at kode på at lave sådanne tempvariabler :-) Men det skal jo i mit tilfælde passe til programmørens resterende koder ;-)

Apropros små bogstaver, så sætter jeg mig ni ned og får kodet dem om.

Kan du ikke bringe mig nogle eksempler fra min kode, hvor jeg bør skrive dem med små bogstaver? Bare så jeg ikke får kodet alt for meget med med små bogstaver.

<script type="text/javascript">

var intSelects = 0;

function appendSelect(f){

    var isMonth = intSelects==0?false:f.elements["isMonth"][1].checked;
    var actDate = intSelects==0?new Date():new Date(f.elements["Date_Year"+intSelects].value, f.elements["Date_Month"+intSelects].selectedIndex, f.elements["Date_Day"+intSelects].selectedIndex + (isMonth?29:8));
     
    var thisDay = actDate.getDate();
    var thisMonth = actDate.getMonth();
    var thisYear = actDate.getFullYear();

    var thisDayName = getDayName(actDate);
 
    intSelects++; 
   
    var dash = document.createTextNode(" ");
    var mother = document.getElementById('motherDiv');
 
    var newTabel = document.createElement("TABLE");
    newTabel.style.width = "100%";
    newTabel.style.border = "0px";
    mother.appendChild(newTabel);

    var newTBody = document.createElement("TBODY");
    newTabel.appendChild(newTBody);

    var newTR = document.createElement("TR");
    newTBody.appendChild(newTR);

    var newTD = document.createElement("TD");
    newTD.style.width = "15px";
    newTD.style.align = "left";
     
    newCheck = document.createElement("INPUT");
    newCheck.type = 'checkbox';
    newCheck.name = 'Cancel_date' + intSelects;
    newCheck.id = 'Cancel_date' + intSelects; 
    newCheck.value = intSelects; 
    newCheck.onclick = function () { doCancelEvent(this.form, this); }
    newTD.appendChild(newCheck);

    newCheck.checked = true;
 
    // ************** 1. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);

    // ************** 2. CELLE START **************************** 
    newTD = document.createElement("TD");
    newTD.style.width = "50px";

    newDiv = document.createElement("div");
    newDiv.id = 'day_name' + intSelects;
    newTD.appendChild(newDiv);
   
    var divTxt = document.createTextNode(thisDayName);
    newDiv.appendChild(divTxt);

    // ************** 2. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);

    // ************** 3. CELLE START **************************** 
    newTD = document.createElement("TD");

    var newSel = document.createElement("SELECT");
    newSel.className = 'inputbox';
    newSel.name = 'Date_Day' + intSelects;
    newSel.id = 'Date_Day' + intSelects;
    var num = intSelects;
    newSel.onclick = function () { updateDayName(num); }
    newTD.appendChild(newSel);

    for(i=1;32>i;i++){
        newSel.options[newSel.length] = new Option(i, i);
    }

    newSel.selectedIndex = thisDay - 1;

    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.className = 'inputbox';
    newSel.name = 'Date_Month' + intSelects;
    newSel.id = 'Date_Month' + intSelects;
    newTD.appendChild(newSel);
     
    var mName = ['','januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december'];
    for(i=1;13>i;i++){
        newSel.options[newSel.length] = new Option(mName[i],i);
    }

    newSel.selectedIndex = thisMonth;

    dash = dash.cloneNode(true);
    newTD.appendChild(dash);

    newSel = document.createElement("SELECT");
    newSel.className = 'inputbox';
    newSel.name = 'Date_Year' + intSelects;
    newSel.id = 'Date_Year' + intSelects;
    newTD.appendChild(newSel);

    //3 år frem i tiden
    for(i=0;3>i;i++){
        newSel.options[newSel.length] = new Option(thisYear + i, thisYear + i);
    }

    newSel.selectedIndex = 0;
 
    // ************** 3. CELLE AFSLUTNING ***********************
    newTR.appendChild(newTD);
}

function updateDayName (strSelected) {

    //tester blot ... kun kladde
    //newDiv.innerHTML = getDayName(form.elements["Date_Day"+element.value].value + "/" + form.elements["Date_Month"+element.value].value + "-" + form.elements["Date_Year"+element.value].value);
    //alert(form.elements["Date_Day"+element.value].value);
    alert(strSelected);
}

function getDayName(dato) {
    strDays = new Array("Søndag","Mandag","Tirsdag","Onsdag","Torsdag","Fredag","Lørdag");
    return strDays[dato.getDay()];
}

function doCancelEvent(form, element) {

    form.elements["Date_Day"+element.value].disabled = element.checked;
    form.elements["Date_Month"+element.value].disabled = element.checked;
    form.elements["Date_Year"+element.value].disabled = element.checked;   
}

Det er _kun_ onclick i ovenstående kode som er indeholdt i den betragtning !-)

-- resten af de ting du bruger er indeholdt i javascript-DOM-binding og er derfor javascript-properties, så du må ikke ændre f.eks. selectedIndex og className !o]

- og så i alle dine createElement's ... document.createElement("table")  :)

createTextNode, appendChild, cloneNode, getElementById samt getDate, getMonth og getFullYear for lige at komplettere listen over de metoder, som skal bruge præcis den kombination af små og store bogstaver

Hvis du er interesseret i lidt opslags steder, er der 'de to stores' DHTML/DOM referencer her:

  http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp

  http://www.mozilla.org/docs/dom/domref/

- samt W3C's listning af DOM-Script bindinger:
  http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ecma-script-binding.html

Takker for links og tabel mv. er hermed rettet.

Og så har jeg lige et spg til :-) Hvordan opdaterer jeg navnet for ugedagen, når brugeren vælger en anden dato i mit div ud for den det sæt af dropdown-boxene, som brugeren har ændret på?

P.t. tilføjer den blot dagen f.eks. "mandag" til (den sidste ankomne) div, hvor der i forvejen f.eks. står "tirsdag", så der kommer til at stå "tirsdagmandag", og det dur ikke (og specielt ikke, når det er en af de ovenstående sæt af dropdown-boxene, som man har ændret på). Den skulle overskrive værdien, så der kom til at så "mandag" ud for den dropdown, som brugeren har ændret. Altså efter samme princip, som i innerHTML.

Kan I hjælpe? Der er check onEvents mv. så det er kun DOM-delen, som I skal hjælpe mig med.

function updateDayName (form, strSelected) {

    strNewDateName = getDayName(form.elements["Date_Day"+strSelected].value + "/" + form.elements["Date_Month"+strSelected].value + "-" + form.elements["Date_Year"+strSelected].value);
    var divTxt = document.createTextNode(strNewDateName);
    newDiv.appendChild(divTxt); 
   
    //dur ikke - havde ellers været smart ;-)
    //newDiv[strSelected].innerHTML = strNewDateName;
}

Åhhh, bliver jeg nødt til at newDiv forskellige numre?
F.eks. newDiv1, newDiv2, newDiv3 osv lige som ved dropdown-boxene?

til at = til at give

Nej, så længe du tildeler variablen et nyt objekt spiller det ingen trille ...

Men hvordan rammer jeg det rigtige objekt?

Kan man sige noget ala: newDiv[den rigtige].updateChild(divTxt); og hvor får man den til at ramme det rigtige div? Altså det div, som står ud for det ændrede sæt dropdown-boxe?

Hvis man kunne sige, så have det løst det. Kan du hjælpe?

function updateDayName (form, strSelected) {

    strNewDateName = getDayName(form.elements["Date_Day"+strSelected].value + "/" + form.elements["Date_Month"+strSelected].value + "-" + form.elements["Date_Year"+strSelected].value);

.
.
.

}

Det ville svare til at skrive:

newDiv[strSelected].innerHTML = strNewDateName;

Fundet - jeg skal bruge: replaceChild(paramenter1,paramenter2)

Men hvordan gør jeg så lige det?

Hymmm... jeg bliver da nødt til at nummergive div'erne?

function updateDayName (form, strSelected) {

    strNewDateName = getDayName(form.elements["Date_Day"+strSelected].value + "/" + form.elements["Date_Month"+strSelected].value + "-" + form.elements["Date_Year"+strSelected].value);
    var divTxt = document.createTextNode(strNewDateName);
    newDiv.replaceChild(divTxt, newDiv[DEN RIGTIGE]);

}

paramenter = parameter

Mit bedste bud p.t. (virker dog ikke):

function updateDayName (form, strSelected) {

    strNewDateName = getDayName(form.elements["Date_Day"+strSelected].value + "/" + form.elements["Date_Month"+strSelected].value + "-" + form.elements["Date_Year"+strSelected].value);
    var divTxt = document.createTextNode(strNewDateName);
    newDiv["Date_Day" & strSelected].replaceChild(divTxt, newDiv["Date_Day" & strSelected]); 

}

Åh, jeg kommer ikke videre pt. før jeg har styr på denne replace-funktion - kan I hjælpe? :-)

newDiv-tingene eksisterer ikke udenfor den funktion, hvor du opretter dem, hvis du ikke sørger for at lave globale variable, hvilket absolut ikke er hensigtsmæssig i dette tilfælde ...

-- så du skal nok finde en måde at finde deres nummer (altså den værdi af intSelects, som er brugt ved oprettelse !-)

-- og så skal du finde elementet vha dets id:

document.getElementById('day_name' + num]. osv.

-- vil det forøvrigt ikke være en fordel at oprette en/flere ny(e) tråd(e), så vi ikke kløjs i denne tråds umådelige længde (indtil nu 124 indlæg ?-)

Jo, slukker og lukker for denne tråde. Jeg valgte at fortsætte i den, da der kom en hel stribe begynder-agtige spg. til DOM. Men jeg kører med flere tråde nu :-) Nu har jeg også lidt bedre check på det med DOM... lidt ;-)

Så kører vi igen, hvis I tør ;-)

http://www.eksperten.dk/spm/634159