Probleem bij dynamisch aanmaken van rijen in een tabel

  • Onderwerp starter Onderwerp starter puli
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
P

puli

Gebruiker
Lid geworden
14 jan 2008
Berichten
9
Ik wil graag dat als de gebruiker op de knop drukt er automatisch een rij wordt aangemaakt
Deze rij heeft een inputveld en radiobutton, nu het probleem dat ik heb is dat alles wel goed wordt aangemaakt maar dat als ik de tweede, derde, etc.. rij neem van radiobutton hij niet wil aanvinken, checked, de eerste kan ik wel aanchecken maar de rest krijg ik niet, de gebruiker heeft enkel de mogelijkheid om maar één radiobutton te checken Hoe krijg ik dit probleem opgelost, iemand een idee, dit is mijn code.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;">
<link rel="stylesheet" type="text/css" href='css/MenuLayout.css' />
<link rel="stylesheet" type="text/css" href='css/TabLayout.css' />
</head>

<body>

<script language = javascript>


function addRowToTable() {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);


//nummers
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);


// cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'txtRow' + iteration);
el.setAttribute('size', '40');
cellRight.appendChild(el);



var cellRight = row.insertCell(2);
var el = document.createElement('input');
el.setAttribute('type', 'radio');
el.setAttribute('name', 'group');
el.setAttribute("checked","checked");
el.checked = false;
cellRight.appendChild(el);


}


function removeRowFromTable() {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}











</script>

<form>

<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />

<table border="1" id="tblSample">
<tr>
<th colspan="2">Test</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="txtRow1" size="40" /></td>
<td><input type="radio" name="group"/></td>
</tr>
</table>

</form>
</body>
</html>
 
Ik heb het gezien na mijn post, In firefox werkt het dus perfect maar met ie wil het niet lukken. Bedankt voor de website ik zal die seffes eens doornemen.
Zou dit op te lossen zijn? of zou ik het op een andere manier moeten aanpakken.
Alle reacties zijn welkom
 
Als IE en FF anders reageren... tja... dan gaan we toch ff checken in welke van de 2 we bezig zijn hé... en dan de gepaste acties uitvoeren :p (andere browsers kan ik niet checken, want die heb ik niet geïstalleerd)
Code: 
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;">
    <link rel="stylesheet" type="text/css" href='css/MenuLayout.css' />
    <link rel="stylesheet" type="text/css" href='css/TabLayout.css' />
    <script language = javascript>
      function addRowToTable(){
        var tbl = document.getElementById('tblSample');
        var lastRow = tbl.rows.length;
        var iteration = lastRow; 
        var row = tbl.insertRow(lastRow);
        var cellLeft = row.insertCell(0);
        var textNode = document.createTextNode(iteration);
        cellLeft.appendChild(textNode);
        var cellRight = row.insertCell(1);
        var el = document.createElement('input');
        el.setAttribute('type', 'text');
        el.setAttribute('name', 'txtRow' + iteration);
        el.setAttribute('size', '40');
        cellRight.appendChild(el);
        var cellRight = row.insertCell(2);
        if (navigator.appName == "Microsoft Internet Explorer") {
          var el = document.createElement("<input type='radio' name='group' value=" + iteration + ">");
        }else{
          var el = document.createElement('input');
          el.setAttribute('type', 'radio');
          el.setAttribute('name', 'group');
          el.setAttribute('value', iteration);
          el.setAttribute("checked","checked");
          el.checked = false;
        }
        cellRight.appendChild(el);
      }
      function removeRowFromTable(){
        var tbl = document.getElementById('tblSample');
        var lastRow = tbl.rows.length;
        if (lastRow > 2) tbl.deleteRow(lastRow - 1);
      }
    </script>
  </head>
  <body>
    <form name='frmX' action='x.php' method='post'>
      <input type="button" value="Add" onclick="addRowToTable();" />
      <input type="button" value="Remove" onclick="removeRowFromTable();" />
      <table border="1" id="tblSample">
        <tr>
          <th colspan="3">Test</th>
        </tr>
          <tr>
          <td>1</td>
          <td><input type="text" name="txtRow1" size="40" /></td>
          <td><input type="radio" name="group" id='id1' value=1 /></td>
        </tr>
      </table>
      <input type='submit' value='submit' name='submit'>
    </form>
  </body>
</html>
Ik heb het formulier gelijk even een name, action, method en submitbutton meegegeven, en de ontvangende php-pagina toont dezelfde resultaten in IE als in FF. Als je de waarden met javascript in de pagina zelf wilt kontroleren, zal je waarschijnlijk nog een id moeten geven aan de radiobutton en dan mag je volgens mij de value weglaten!
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan