innerHTML - maze zadane udaje do inputov

Blackshadow · Napísal **Blackshadow**: 07.01.2009 13:39

mam tabulku, v ktorej su inputy na zadavanie nazvu tovaru, ceny a poctu kusov..

po kliknuti na tlacitko, by sa mal dat pridat do tabulky dalsi riadok s pripravenymi inputmi... to vsetko ide, ale ked som uz nieco zadal a stlacim tlacitko na pridanie dalsieho riadku, tak mi to vyplnene udaje zmaze.. ako to upravit??

Kód:

function pridaj()
{
  html = '<tr>'+
          '<td style="padding:3px;">'+
            '<input type="text" name="dalsiTovarNazov[]" size="25" value=""></td>'+
          '<td style="padding:3px;">'+
            '<input type="text" name="dalsiTovarCena[]" size="3" value="" style="text-align:right;"> &euro;'+
          '</td>'+
          '<td style="padding:3px;">'+
            '<input type="text" name="dalsiTovarKusy[]" style="text-align:right;" size="2" value=""> ks'+
          '</td>'+
        '</tr>';
  hodnota = document.getElementById('dalsiTovar').innerHTML;
  document.getElementById('dalsiTovar').innerHTML = hodnota + html;
}

Kód:

<table id="dalsiTovar">
<tr>
  <td style="padding:3px;">
    <input type="text" name="dalsiTovarNazov[]" size="25" value=""></td>
  <td style="padding:3px;">
    <input type="text" name="dalsiTovarCena[]" size="3" style="text-align:right;" value=""> &euro;
  </td>
  <td style="padding:3px;">
    <input type="text" name="dalsiTovarKusy[]" style="text-align:right;" size="2" value=""> ks
  </td>
</tr>
</table>

Kód:

juho · Napísal **juho**: 09.01.2009 9:18

no pretoze ty prikazom innerHTML vyberes iba to co je napisane v sourcecode

Kód:

a to co tam ty napises to je hodnota value a v source kode ju mas stale prazdnu takze sa ti to preto stale akoby maze musis to skusit inak ako cez innerHTML alebo budes musiet vymysliet ako zmenit value tych inputov aby si to mohol pouzit
no napr takto

Kód:

<script>
function pridaj()
{
  var html ='<td style="padding:3px;">'+
             '<input type="text" name="dalsiTovarNazov[]" size="25" value=""></td>'+
            '<td style="padding:3px;">'+
             '<input type="text" name="dalsiTovarCena[]" size="3" value="" style="text-align:right;"> &euro;'+
            '</td>'+
            '<td style="padding:3px;">'+
             '<input type="text" name="dalsiTovarKusy[]" style="text-align:right;" size="2" value=""> ks'+
            '</td>';
  var riadok=document.getElementById('dalsiTovar').insertRow(-1).innerHTML=html;
}

</script>
<table id="dalsiTovar">
<tr>
  <td style="padding:3px;">
    <input type="text" name="dalsiTovarNazov[]" size="25" value=""></td>
  <td style="padding:3px;">
    <input type="text" name="dalsiTovarCena[]" size="3" style="text-align:right;" value=""> &euro;
  </td>
  <td style="padding:3px;">
    <input type="text" name="dalsiTovarKusy[]" style="text-align:right;" size="2" value=""> ks
  </td>
</tr>
</table>
<input type="button" onClick="pridaj();" value="Pridaj tovar">

aj ked sa mi zda ze v IE to nebude fungovat asi ..jak obvykle.. kedze tr tam je hadam readonly

johny128 · Napísal **johny128**: 09.01.2009 19:38

juho píše:

aj ked sa mi zda ze v IE to nebude fungovat asi ..jak obvykle..

Spravne, nebude to fungovat

Naproti tomu, toto funguje vo vsetkych prehliadacoch

Kód:

var pridaj = function () {
   var a = document.getElementById("dalsiTovar");
   var b = a.getElementsByTagName("tr")[0];
   var tr = b.cloneNode( true );
   var c = tr.getElementsByTagName("input");
   
   for (var i = 0; i < c.length; i++) {
      c[i].value = "";
   }
   
   a.getElementsByTagName("tbody")[0].appendChild(tr);
}

Najdeme si prve 'tr' v tabulke a spravime jeho klon. Nasledne prejdeme vsetky 'input' tagy v tomto klone a ich value vyprazdnime. Ako posledny krok, najdeme si tbody v tabulke a tento klon pridame na spodok.

Nezabudaj teda ze telo tabulky musi byt uzavrete v 'tbody'

Napr

Kód:

<table id="dalsiTovar"> 
<tbody>
<tr> 
  <td style="padding:3px;"> 
    <input type="text" name="dalsiTovarNazov[]" size="25" value=""></td> 
  <td style="padding:3px;"> 
    <input type="text" name="dalsiTovarCena[]" size="3" style="text-align:right;" value=""> &euro; 
  </td> 
  <td style="padding:3px;"> 
    <input type="text" name="dalsiTovarKusy[]" style="text-align:right;" size="2" value=""> ks 
  </td> 
</tr> 
</tbody>
</table>

Daj vediet ci ide

Blackshadow · Napísal autor témy **Blackshadow**: 09.01.2009 22:05

pouzil som nieco uplne ine, spravil som si to ja takym strasne kostrbatym sposobom asi:

Kód:

function pridaj()
{
    var html = '';
    d = document.getElementsByTagName('input');
    j=0;
    p=0;
    var cl = new Array()
      for(i=0;i<d.length;i++){
        if(d[i].className == 'dalsi'){
         cl[j] = d[i];
         
         switch (p) {
           case 0:
           html = html + '<tr>' +
                  '<td style="padding:3px;">'+
                    '<input type="text" name="dalsiTovarNazov[]" size="25" class="dalsi" value="'+cl[j].value+'"></td>';
           break;
           case 1:
           html = html +
                '<td style="padding:3px;">'+
                  '<input type="text" name="dalsiTovarCena[]" size="3" class="dalsi" value="'+cl[j].value+'" style="text-align:right;"> &euro;'+
                '</td>';
           break;
           case 2:
           html = html + '<td style="padding:3px;">'+
                  '<input type="text" name="dalsiTovarKusy[]" style="text-align:right;" class="dalsi" size="2" value="'+cl[j].value+'"> ks'+
                  '</td>'+
                  '</tr>'
           break;
          }
          
          if(p==2) {
            p=0;
          } else {
            p++;
          }
          j++;
        }
      }
  html = html + '<tr>' +
          '<td style="padding:3px;">'+
            '<input type="text" name="dalsiTovarNazov[]" size="25" class="dalsi" value=""></td>'+
          '<td style="padding:3px;">'+
            '<input type="text" name="dalsiTovarCena[]" size="3" class="dalsi" value="" style="text-align:right;"> &euro;'+
          '</td>'+
          '<td style="padding:3px;">'+
            '<input type="text" name="dalsiTovarKusy[]" style="text-align:right;" class="dalsi" size="2" value=""> ks'+
          '</td>'+
        '</tr>';
  //hodnota = document.getElementById('dalsiTovar').innerHTML;
  document.getElementById('dalsiTovar').innerHTML = html;
}

ucel to plni... diki

innerHTML - maze zadane udaje do inputov

Podobné témy