[JS] tonen/verbergen kolom

[Mamphiz]

Hoi,

Ik ben een bezig met een project waarbij het nodig is om kolommen van een tabel te verbergen of te tonen. Dit omdat het om veel kolommen achter elkaar gaat en het nodig moet zijn om bepaalde kolom naast elkaar te kunnen zetten (denk aan excel met vastzetten of het simpelweg slepen van kolommen). Ik dacht dit te doen moet display="none" of "block", maar het is niet mogelijk een een cel dezelfde naam te geven als een ander.

Ik weet wel een oplossing, door elke cel een apart nummer en een overeenkomste naam van de kolom te geven, bijv. kolom1_1, kolom1_2 en dan met een loop door al je elementen te gaan en kijken of er een resultaat is als je document.getElementById(name).id.indexOf('kolom1') doet.

Maar dit lijkt me niet zo'n mooie oplossing, zeker niet als je straks 1000 of meer rijen hebt met ieder 20 kolommen...

Ik heb al een keer zo'n systeem gemaakt, maar het werkt echt te langzaam. Ik heb wat op google gezocht, maar de meesten resultaten gaan over het verbergen van rijen. Ook op tweakers en phpfreakz gezocht, maar zonder succes.

Kan iemand mij adviseren? Alvast bedankt

[Mamphiz]

Het komt op dit neer, maar dan iets wat niet alle kolommen doorloopt, en eentje die met meerdere tabellen kan werken....
http://www.faqts.com/knowledge_base/view.phtml/aid/7635

[Michali]

Ik begrijp helemaal niets van je verhaal. Wat heeft "display: block/none;" nou weer te maken met het feit dat 2 elementen geen zelfde ID mogen hebben? "document.getElementById(name).id.indexOf('kolom1')" slaat verder helemaal nergens op. Je selecteerd eerst een element aan de hand van zijn ID, en dat kan dus alleen als je het ID al hebt. Daarna ga je nog eens controleren of er iets voorkomt in het ID van het element wat je net geselecteerd hebt aan de hand van zijn ID. Oftewel: "name.indexOf('kolom1')" is exact gelijk, maar het lijkt me niet dat je daar enige stap mee verder komt. Dus zou je dit kunnen toelichten? Ik begrijp totaal niet wat je hier nu mee bedoelt.

[crisp]

Simpel voorbeeldje:

HTML:

<script type="text/javascript">

function toggleColumn(num, button)
{
    var table = document.getElementById('mytable');
    var rows = table.rows, i = rows.length;
    var display = table.rows[0].cells[num].style.display == 'none' ? '' : 'none';
    while (i--)
    {
        table.rows[i].cells[num].style.display = display;
    }

    button.value = (display ? 'Show' : 'Hide') + ' column ' + (num + 1);
}
</script>
<table id="mytable" border="1">
    <tr>
        <td>Kolom 1</td>
        <td>Kolom 2</td>
        <td>Kolom 3</td>
        <td>Kolom 4</td>
    </tr>
    <tr>
        <td>Kolom 1</td>
        <td>Kolom 2</td>
        <td>Kolom 3</td>
        <td>Kolom 4</td>
    </tr>
    <tr>
        <td>Kolom 1</td>
        <td>Kolom 2</td>
        <td>Kolom 3</td>
        <td>Kolom 4</td>
    </tr>
    <tr>
        <td>Kolom 1</td>
        <td>Kolom 2</td>
        <td>Kolom 3</td>
        <td>Kolom 4</td>
    </tr>
    <tr>
        <td>Kolom 1</td>
        <td>Kolom 2</td>
        <td>Kolom 3</td>
        <td>Kolom 4</td>
    </tr>
</table><br>
<input type="button" value="Hide column 1" onclick="toggleColumn(0, this)">
<input type="button" value="Hide column 2" onclick="toggleColumn(1, this)">
<input type="button" value="Hide column 3" onclick="toggleColumn(2, this)">
<input type="button" value="Hide column 4" onclick="toggleColumn(3, this)">

[André]

Beste Mamphiz, een topic opnieuw openen nadat het door een moderator gesloten is mag niet. Overleg altijd even met de moderator in kwestie.

Verder heb je zoals willem169 al zei helemaal niet laten zien wat je al geprobeerd hebt. Heb je uberhaupt al een script en wat gaat daar fout in? We gaan hier geen kant-en-klare oplossing voor je verzinnen. Ik laat dit topic open om je nog een kans te geven.

/edit:
Met de hint van crisp zou je iig al een heel stuk verder moeten kunnen. Ga daar eerst eens mee aan de slag.

[ Voor 13% gewijzigd door André op 07-07-2005 11:02 ]