Tabel dynamisch vullen vanuit dropdown.

[Verwijderd]

Hallo allemaal,

Ik wil iets ingewikkelds maken, maar ik heb geen idee waar ik moet beginnen. Het gaat om het volgende:

Een statische variant is te zien op http://www.rsvdv.nl/test/dynamische_tabel.html.
Ik wil vanuit een dropdownmenu een tabel vullen. Elke keer dat er een optie uit de DD geselecteerd wordt en er op toevoegen wordt geklikt, dan moet de tabel een regel extra krijgen met het geselecteerde productnaam in de juiste cel. Elke regel moet ook een knop hebben om de regel te verwijderen, wanneer er een verkeerd product gekozen is.

Wanneer de overige gegevens zijn ingevuld, dan moet het formulier verzonden worden naar een pagina die de boel verwerkt. Dus de id's van de producten moeten ook meegestuurd worden, zonder dat de gebruiker het ziet.

Ik begijp dat het in een form allemaal in een form moet staan om te verzenden, dat is het probleem niet, maar het dynamische gedeelte van de tabel is het probleem. Ik ben tijdens het zoeken javascript tegen gekomen en ook DOM kwam steeds naar voren. Maar ik weet dus niet waar ik moet beginnen.

Ik hoef geen kant en klare oplossingen (is wel makkelijk, maar niet mijn opzet), maar ik hoor graag naar welke JS functies enzo ik moet kijken.

Wie helpt mij in de goede richting?

Alvast bedankt.

Groeten,

Robert

[Patriot]

Het hangt sterk af van hoe je het aan wilt pakken.
Je kunt steeds hele rijen toevoegen met insertRow(); maar je kunt ook rijen zichtbaar en onzichtbaar maken met het CSS element display. Het beste is denk ik het eerste.

Als je meer info wilt over het toevoegen/verwijderen van rows zou ik eens kijken op deze pagina van w3schools.com. Lees de pagina goed door, en kijk vooral naar de object methods en wat je ermee kunt. Als je dan nog vragen hebt zijn wij hier weer.

[RobIII]

Ik heb vandaag mijn slotjes quota al gehaald, en ik hou het maar even op een cliëntside probleempje. Dus je krijgt van mij alleen een schop richting [PRG >> WEB]
(Maar dat heb je vooral te danken aan het feit dat Patriot de moeite heeft genomen nog een zinnige reply te geven en dat het topic daarom nog wat kans maakt...)
We zien hier (@GoT) graag wat eigen initiatief en inzet, en dat ontbreekt nogal in je topicstart. Je zegt dat je al wat hebt gevonden, maar verder zeg je er niets over. Heb je al gekeken naar die code? Heb je al iets geprobeerd? Anything?

[ Voor 29% gewijzigd door RobIII op 30-08-2006 23:26 ]

[Verwijderd]

RobIII schreef op woensdag 30 augustus 2006 @ 23:22:
Ik heb vandaag mijn slotjes quota al gehaald, en ik hou het maar even op een cliëntside probleempje. Dus je krijgt van mij alleen een schop richting [PRG >> WEB]
(Maar dat heb je vooral te danken aan het feit dat Patriot de moeite heeft genomen nog een zinnige reply te geven en dat het topic daarom nog wat kans maakt...)
We zien hier (@GoT) graag wat eigen initiatief en inzet, en dat ontbreekt nogal in je topicstart. Je zegt dat je al wat hebt gevonden, maar verder zeg je er niets over. Heb je al gekeken naar die code? Heb je al iets geprobeerd? Anything?

Ik zet niet voor niets neer:

Ik hoef geen kant en klare oplossingen (is wel makkelijk, maar niet mijn opzet), maar ik hoor graag naar welke JS functies enzo ik moet kijken.

JS en DOM zijn dingen waar ik nog nooit mee heb gewerkt. Maar dat zeg niet dat ik het aan een ander over laat.

Maar toch bedankt dat het topic nog een kan krijgt.


Het geen ik gevonden heb voegt alleen regels toe. Maar in de broncode was er niets van te zien. (Dat is waarscheinlijk logisch, maar omdat ik de materie niet ken ben ik weer verder gaan kijken naar iets meer "tastbaars")

[Verwijderd]

Patriot schreef op woensdag 30 augustus 2006 @ 23:19:
Het hangt sterk af van hoe je het aan wilt pakken.
Je kunt steeds hele rijen toevoegen met insertRow(); maar je kunt ook rijen zichtbaar en onzichtbaar maken met het CSS element display. Het beste is denk ik het eerste.

Als je meer info wilt over het toevoegen/verwijderen van rows zou ik eens kijken op deze pagina van w3schools.com. Lees de pagina goed door, en kijk vooral naar de object methods en wat je ermee kunt. Als je dan nog vragen hebt zijn wij hier weer.

Thnx voor je reply. Ik ga het bestuderen. Als het opgelost is, dan zal ik het posten.

[Patriot]

Overigens wil ik even melden dat er geen manier is om het cliëntside te doen (dus met Javascript), en er iets van terug te vinden in de broncode. Javascript wijzigt de broncode zoals hij in het geheugen staat, niet zoals je hem opvraagt door op "Bron weergeven" te klikken (of "View source" als je een engelse browser hebt).

Ohja, als je nou de volgende keer nog iets wilt toevoegen aan je post, nadat je deze gemaakt hebt, maak er dan niet nog een. Gebruik <- Dat knopje, om je posts te wijzigen. Het is verboden dubbelposts (2 posts achter elkaar) te plaatsen.

[ Voor 33% gewijzigd door Patriot op 31-08-2006 00:32 ]

[Verwijderd]

Patriot schreef op donderdag 31 augustus 2006 @ 00:23:
Overigens wil ik even melden dat er geen manier is om het cliëntside te doen (dus met Javascript), en er iets van terug te vinden in de broncode.

Welk gedeelte is niet cliëntside te doen?

Ohja, als je nou de volgende keer nog iets wilt toevoegen aan je post, nadat je deze gemaakt hebt, maak er dan niet nog een. Gebruik [afbeelding] <- Dat knopje, om je posts te wijzigen. Het is verboden dubbelposts (2 posts achter elkaar) te plaatsen.

Zal ik doen. (ik heb geen dubbele posts geplaatst toch? of heb ik wat over het hoofd gezien?)

[Technicality]

http://www.howtocreate.co...avascript/domintroduction

Een prima introductie in de wondere wereld van DOM-scripten, icm met http://www.w3schools.com/js/default.asp (voor syntax en bepaalde functies) is het zo prima te doen.

Als je al wat verder gevorderd bent, denk er dan aan dat je tabelrijen in een <tbody> tag verwerkt (hetzij echt in de html gezet, hetzij door js gegenereerd).
Doe je dit niet (en je wilt dingen toevoegen aan een <table> krijg je rare fenomenen als whitespace waar het niet hoort e.d.

edit: in Firefox installatie met "hulpmiddelen voor webontwikkelaars" zit een JS-console (die fouten opspoort en aangeeft in welke regel deze zit) die goed bruikbaar is. Ook kan je in firefox een DOM-bron van selectie opvragen en last but not least: de DOM inspector, nuttig hulpmiddel om wat inzicht te krijgen in de DOM-structuur van je pagina.

[ Voor 26% gewijzigd door Technicality op 31-08-2006 01:14 ]

[Verwijderd]

Hallo allemaal,

Ik ben een tijdje aan het knutselen geweest en heb nu het volgende:
http://www.rsvdv.nl/test/dynamische_tabel.html

Ik kan ook de rijen verwijderen, maar maar het gaat niet goed wanneer je niet onderaan begint met verwijderen, omdat de rowID dan niet meer klopt.

Bovendien gaat het helemaal mis in firefox.

Nog een vraagje: Kan het JS korter? Ik vind het aardig wat code voor relatief weinig resultaat.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamische Tabel</title>
<script type="text/javascript">
i = 1;

function delRow(rowID)
{
    document.getElementById('table1').deleteRow(rowID)
    i--
    document.getElementById("label").value=i
}

function addRow2(tableID)
{
    // Get a reference to the table
    var tableRef = document.getElementById(tableID)
    
    // Insert a row in the table at row index 0
    var newRow   = tableRef.insertRow(i);
    
    // Insert a cell in the row at index 0
    var newCell0  = newRow.insertCell(0);
    
    // Append a text node to the cell
    newCell0.innerHTML = "<input type=\"text\" size=\"5\"/>"
    
    // Insert a cell in the row at index 0
    var newCell1  = newRow.insertCell(1);
    
    // Append a text node to the cell
    var x=document.getElementById("lijst")
    newCell1.innerHTML = x.options[x.selectedIndex].text
    
    // Insert a cell in the row at index 0
    var newCell2  = newRow.insertCell(2);
    
    // Append a text node to the cell
    newCell2.innerHTML = "<input type=\"checkbox\" />"
    
    // Insert a cell in the row at index 0
    var newCell3  = newRow.insertCell(3);
    
    // Append a text node to the cell
    newCell3.innerHTML = "<input type=\"checkbox\" />"
    
    // Insert a cell in the row at index 0
    var newCell4  = newRow.insertCell(4);
    
    // Append a text node to the cell
    newCell4.innerHTML = "<input type=\"button\" onclick=\"delRow("+i+")\" value=\"Verwijderen\">"
    
    i++
    document.getElementById("label").value=i
}

</script>
</head>

<body>
<form action="" method="post" name="form1">
    <select name="lijst">
        <option value="1">Product 1</option>
        <option value="2">Product 2</option>
        <option value="3">Product 3</option>
        <option value="4">Product 4</option>
        <option value="5">Product 5</option>
        <option value="6">Product 6</option>
        <option value="7">Product 7</option>
        <option value="8">Product 8</option>
        <option value="9">Product 9</option>
        <option value="10">Product 10</option>
    </select>
    
    <input type="button" onclick="addRow2('table1')" value="Toevoegen">
</form>

<form action="" method="post" name="form2">
    <p>
        rowID = <input type="text" id="label" size="5" value="1" />
    <p/>
    
    <table width="500" border="1" cellspacing="0" cellpadding="0" id="table1">
        <tbody>
            <tr>
                <th scope="col" width="80">Aantal</th>
                <th scope="col">Product</th>
                <th scope="col" width="100">Onderhoud</th>
                <th scope="col" width="100">Reparatie</th>
                <th scope="col" width="100">&nbsp;</th>
            </tr>       
        </tbody>                        
    </table>
    <br /><br /><br />
    
    <input type="button" value="Verzenden" />
</form>

</body>
</html>

[Verwijderd]

Iemand die mij hiermee nog kan helpen?

Groeten,

Robert

[XWB]

Topic schoppen binnen de 24 uur is niet nodig En gooi die code van jou maar in de prullenbak

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamische Tabel</title>
<script type="text/javascript">

function generateRow (tableId, productNr)
{
    var table = document.getElementById(tableId).getElementsByTagName('tbody')[0];
    var tr = document.createElement('tr');  
    
    var td = document.createElement('td');
    var aantal = document.createElement('input');   
    aantal.type = 'text';
    aantal.size = 5;
    aantal.name = 'aantal';
    td.appendChild(aantal);
    tr.appendChild(td);
    
    var td = document.createElement('td');
    var product = document.createTextNode('Product ' + productNr);
    td.appendChild(product);
    tr.appendChild(td);     

    var td = document.createElement('td');
    var box = document.createElement('input');
    box.type = 'checkbox';
    box.name = 'product';
    td.appendChild(box);
    tr.appendChild(td); 
    
    var td = document.createElement('td');
    var box = document.createElement('input');
    box.type = 'checkbox';
    box.name = 'onderhoud';
    td.appendChild(box);
    tr.appendChild(td);     
    
    var td = document.createElement('td');
    var deleteButton = document.createElement('input');
    deleteButton.type = 'button';
    deleteButton.value = 'Verwijder';
    deleteButton.onclick = function() 
    { 
        table.deleteRow (tr.rowIndex); 
    }
    td.appendChild(deleteButton);
    tr.appendChild(td);     
    
    table.appendChild(tr);
}

</script>
</head>

<body>
<form action="" method="post" name="form1">
    <select name="lijst">
        <option value="1">Product 1</option>
        <option value="2">Product 2</option>
        <option value="3">Product 3</option>
        <option value="4">Product 4</option>
        <option value="5">Product 5</option>
        <option value="6">Product 6</option>
        <option value="7">Product 7</option>
        <option value="8">Product 8</option>
        <option value="9">Product 9</option>
        <option value="10">Product 10</option>
    </select>
    <input type="button" onclick="generateRow('table1', lijst.value)" value="Toevoegen" />
</form>
<br />
<form action="" method="post" name="form2">
    <table width="500" border="1" cellspacing="0" cellpadding="0" id="table1">
        <tbody>
            <tr>
                <th scope="col" width="80">Aantal</th>
                <th scope="col">Product</th>
                <th scope="col" width="100">Onderhoud</th>
                <th scope="col" width="100">Reparatie</th>
                <th scope="col" width="100">&nbsp;</th>
            </tr>        
        </tbody>                        
    </table>
    <br /><br />
    <input type="button" value="Verzenden" />
</form>

</body>
</html>

[Verwijderd]

Hacku schreef op vrijdag 01 september 2006 @ 00:40:
Topic schoppen binnen de 24 uur is niet nodig En gooi die code van jou maar in de prullenbak

Sorry.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamische Tabel</title>
<script type="text/javascript">

function generateRow (tableId, productNr)
{
    var table = document.getElementById(tableId).getElementsByTagName('tbody')[0];
    var tr = document.createElement('tr');  
.....

Heel erg bedankt!

Ik ga het eens goed bestuderen, anders leer ik er niets van natuurlijk.