[javascript] een tabel met checkboxen vullen vanuit popup

[marty]

mbv deze functie:

code:

 <script language="javascript" type="text/javascript">
 var count = 0;
 function add_checkbox(no)
 {
    if (count == 10)
    {
        var nieuw = '</tr><tr>\n';
        count = 0;
    }
    else
        var nieuw = '';
    nieuw       = nieuw+' <td>\n\t'+no+': <input type="checkbox" name="printed['+no+']" checked>\n </td>\n';
    var huidig  = opener.document.getElementById('formvalues').innerHTML;
    opener.document.getElementById('formvalues').innerHTML = huidig+nieuw;
    count++;
 }
 </script>

vul ik vanuit een popup een <table> tag op de pagina die de popup heeft geopend met een aantal checkboxen. Nou voegt die functie alleen geheel op eigen houtje ook allemaal <tbody> en andere <tr> tags toe waar ik nooit om gevraagd heb.

output van de functie:

code:

        <tbody><tr>
        </tr>
        </tbody> <tbody><tr><td>
    260: <input type="checkbox" name="printed[260]" checked="checked">
 </td></tr></tbody> <tbody><tr><td>
    262: <input type="checkbox" name="printed[262]" checked="checked">
 </td></tr></tbody> <tbody><tr><td>
    263: <input type="checkbox" name="printed[263]" checked="checked">
 </td></tr></tbody> <tbody><tr><td>
    266: <input type="checkbox" name="printed[266]" checked="checked">
 </td></tr></tbody> <tbody><tr><td>
    267: <input type="checkbox" name="printed[267]" checked="checked">
 </td></tr></tbody> <tbody><tr><td>
    268: <input type="checkbox" name="printed[268]" checked="checked">
 </td></tr></tbody> <tbody><tr><td>
    269: <input type="checkbox" name="printed[269]" checked="checked">
 </td></tr></tbody> <tbody><tr><td>
    270: <input type="checkbox" name="printed[270]" checked="checked">
 </td></tr></tbody> <tbody><tr><td>
    271: <input type="checkbox" name="printed[271]" checked="checked">
 </td></tr></tbody> <tbody><tr><td>
    272: <input type="checkbox" name="printed[272]" checked="checked">
 </td></tr></tbody><tbody><tr>
 <td>
    273: <input type="checkbox" name="printed[273]" checked="checked">
 </td></tr></tbody> <tbody><tr><td>
    274: <input type="checkbox" name="printed[274]" checked="checked">
 </td></tr></tbody>

En daar ben ik niet zo blij mee, want nu komt alles onder elkaar te staan ipv per regel van 10 naast elkaar.

Weet iemand hoe ik dat kan verhelpen?

(p.s. op de oorspronkelijk pagina is dit m'n html code:
<table id="formvalues">
<tr>
</tr>
</table>)

[Verwijderd]

Waarom voeg je het niet met DOM-methodes toe? Die innerHTML is helemaal niet nodig.

Kun je je functie even beter uitleggen? Ik snap het namelijk niet helemaal.

[marty]

Hoe bedoel je met DOM-methodes?

De functie is voor het volgende:
Ik open vanaf een pagina een popupje waarin een heleboel bladzijden worden uitgeprint. Bij iedere bladzijde die ik uitprint moet er een checkbox (met vinkje) op de oorspronkelijke pagina komen te staan die aangeeft dat de pagina goed is uitgeprint, zodat die informatie vervolgens in een database kan worden opgeslagen en men weet dat de pagina al een keer is uitgeprint (en dus verwerkt). Dat moet zo, omdat er van alles met de printer mis kan gaan en bepaalde pagina's dus ook uitgevinkt kunnen worden, zodat ze bij het refreshen nog een keer worden uitgeprint. Hoop dat het duidelijk is.

Zou je mij kunnen uitleggen wat je met DOM-methodes bedoelt?

[Spider.007]

Document Object Modeling gaat er vanuit dat je je HTML pagina als object ziet; dus bijv niet getElementByID; maar document.formValues

[google=javascript DOM]

[ Voor 95% gewijzigd door Spider.007 op 23-02-2003 22:34 ]

[marty]

oke, ik heb het geprobeerd, maar ik snap toch nog niet hoe ik 'm nou moet aanspreken. Al die tutorials leggen alleen maar uit hoe het voor formulieren, frames en plaatjes werkt. Hoe spreek ik nou de html binnen een tabel aan?

ik heb dus een tabel:

<table id="formvalues">
<tr>
</tr>
</table>

Waarvan ik de html wil veranderen
Ik heb het o.a. geprobeerd door opener.document.formvalues.value ... maar dat wil allemaal niet. Zou iemand me de juiste syntax kunnen vertellen?

[marty]

Oke....ik heb gevonden wat ik zocht...denk ik. maar het werkt niet en ik snap de foutmelding niet. Dit is hoe ik het nu heb:

code:

 <script language="javascript" type="text/javascript">
 var count = 0;
 function add_checkbox(no)
 {
    if (count == 10)
    {
        var nieuw = '</tr><tr>\n';
        count = 0;
    }
    else
        var nieuw = '';
    nieuw       = nieuw+' <td>\n\t'+no+': <input type="checkbox" name="printed['+no+']" checked>\n </td>\n';
    var huidig  = opener.document.getElementById('formvalues');
    huidig.appendChild(nieuw);
    count++;
 }
 </script>

Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLTableElement.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"

Geen idee wat ik fout doe en hoe ik het op moet lossen...

[Morrar]

Met appendChild voeg je een HTMLElement toe, dat is dus een object wat je eerst in elkaar moet knutselen met createElement. En je moet er dus niet gewoon HTML mee plakken. Vandaar de foutmelding...

[Morrar]

Owkee toch nog even wat in elkaar kunnen frutselen voor bedtijd... Dit scriptje bevat de functie voor het toevoegen van de checkboxen:

code:

//Constructor Checkbox-object
function Checkbox(name, value, label)
{   this.name = name; this.value = value; this.label = label;
}

//Function adds a row to the table with sTableName
//and inserts the checkboxes in the array aChecks
function AddCheckBoxes(sTableName, aChecks)
{   var oTable = document.getElementById(sTableName);

    //Create and append a new row
    var oTr = oTable.insertRow(oTable.rows.length);

    //Create and append cells for the checkboxes
    for(var i = 0; i < aChecks.length; i++)
    {   var oCurrCheck = aChecks[i];
        //Build cell and add it to oTr
        var oTd = oTr.insertCell(oTr.cells.length);

        //Build checkbox and add it to oTd
        var oCB = document.createElement("INPUT");
        oCB.id = oCB.name = oCurrCheck.name;
        oCB.value = oCurrCheck.value;
        oCB.type = "checkbox";
        oTd.appendChild(oCB);

        //Add value text
        var oTxt = document.createTextNode(oCurrCheck.label);
        oTd.appendChild(oTxt);
    }
}

Zoals je ziet heeft de functie een array nodig, en wel eentje met Checkbox-objectjes... Dat zou er dus zoiets uitzien:

code:

aCheckBoxes = new Array();
aCheckBoxes[0] = new Checkbox("Naampje1", "Waarde1", "Tekst erbij 1");
aCheckBoxes[1] = new Checkbox("Naampje2", "Waarde2", "Tekst erbij 2");
aCheckBoxes[2] = new Checkbox("Naampje3", "Waarde3", "Tekst erbij 3");

Als je zo'n array hebt kun je de functie AddCheckBoxes als volgt aanroepen:

code:

AddCheckBoxes('TabelNaamHier', aCheckBoxes)

Die aanroep kan bijvoorbeeld aan een knopje gehangen worden. 'TabelNaamHier' moet je natuurlijk even vervangen voor de id/name van de table waar de checkboxes moeten komen.

Tenslotte had je geloof ik vanalles met een popup toch? De AddCheckBoxes functie moet echter in dezelfde pagina staan als de tabel. Je kunt echter wel het Array verplaatsen naar een popup maar vergeet dan niet de Checkbox-functie/constructor ook naar de popup te verplaatsen! :-)

Suc6