Avatar billede mickiii Nybegynder
22. august 2005 - 23:21 Der er 8 kommentarer og
2 løsninger

Et IE/FF DOM problem

Har lavet denne funktion:

<script language="javascript">
function instant_edit_list(elm, something) {
var elm_array = elm.parentNode.getElementsByTagName('td');//Array of elements tagged td inside parentNode

    for (i = 0; i < elm_array.length; i++) {
      var current_value = elm_array.item(i).innerHTML;
      elm_array.item(i).innerHTML = '';
      var input = document.createElement('input');
            input.setAttribute('type','text');
          input.setAttribute('value',current_value);
          input.setAttribute('class','input');/*Mozilla gets this*/
          input.setAttribute('className','input');/*IE gets this*/
      elm_array.item(i).appendChild(input);
      input.focus();
    }
}
</script>

Til en tabel der ligner noget i retning af:

        <table class="infoset" id="address">
            <h2>Adresse:</h2>
                <tr><th>Navn:</th><td><? echo $settings['company_info']['company_name'][0];?></td></tr>
                <tr><th>Vej og nr:</th><td><? echo $settings['company_info']['company_address'][0];?></td></tr>
                <tr></tr><th>Postnummer:</th><td><? echo $settings['company_info']['company_zip'][0];?></td>
                <tr></tr><th>By:</th><td><? echo $settings['company_info']['company_city'][0];?></td></tr>
            <a href="#" onClick="instant_edit_list(this, 'address');">&laquo;&nbsp;Rediger</a>
        </table>

Kan nogen fortælle mig hvorfor det overhovedet ikke virker i IE, mens det i FF virker, bortset fra at hvis der er flere 'table' elementer, bliver alle 'td' til inputs.

På forhånd tak.
Avatar billede softspot Forsker
22. august 2005 - 23:34 #1
Nogle eksperter her på sitet er blevet hørt sige ting som at man lægger op til øretæver hvis man placerer tags i en table men undenfor td-elementerne. Jeg vil umiddelbart tro at det kan have noget med det at gøre.

Du kan evt. lægge en div omkring tabellen og så rykke din <h2> og <a>-tags udenfor tabellen men stadig inde i div-tag'et. Mon så ikke din funktion så stadig ville fungere...
Avatar billede roenving Novice
22. august 2005 - 23:37 #2
Sikkert fordi de eneste slags elementer, der kan være children til en table er tbody, thead og tfoot-elementer, som så kun kan indeholde tr-elementer, som kun kan indeholde th og td-elementer ...

-- så dine hx-tags og a-tags er simpelthen ulovligt nestet ...
Avatar billede roenving Novice
22. august 2005 - 23:38 #3
Du kan prøve denne, den virker umiddelbart i alle mine browsere:

<script language="javascript">
function instant_edit_list(elm, something) {
var par = elm;
while(par.tagName.toLowerCase() != "table")
  par = par.parentNode;
var elm_array = par.getElementsByTagName('td');//Array of elements tagged td inside parentNode

    for (i = 0; elm_array.length > i; i++) {
      var current_value = elm_array[i].innerHTML;
      elm_array[i].innerHTML = '';
      var newInp = document.createElement('input');
            newInp.setAttribute('type','text');
          newInp.setAttribute('value',current_value);
          newInp.setAttribute('class','input');/*Mozilla gets this*/
          newInp.setAttribute('className','input');/*IE gets this*/
      elm_array[i].appendChild(newInp);
      newInp.focus();
    }
}
</script>

Til en tabel der ligner noget i retning af:

        <table class="infoset" id="address">
            <tr><th colspan="2"><h2>Adresse:</h2></th></tr>
                <tr><th>Navn:</th><td>company_name</td></tr>
                <tr><th>Vej og nr:</th><td>company_address</td></tr>
                <tr></tr><th>Postnummer:</th><td>company_zip</td></tr>
                <tr></tr><th>By:</th><td>company_city</td></tr>
            <tr><th colspan="2"><a href="#" onClick="instant_edit_list(this, 'address');">&laquo;&nbsp;Rediger</a></th></tr>
        </table>
Avatar billede softspot Forsker
22. august 2005 - 23:40 #4
Jeg skulle lige til at sige at flg. fungerer i både IE 6.0 og FF:

<html>
<head>
<title></title>
<script language="javascript">
function instant_edit_list(elm, something) {
    var elm_array = elm.parentNode.getElementsByTagName('td');//Array of elements tagged td inside parentNode

    for (i = 0; i < elm_array.length; i++) {
      var current_value = elm_array.item(i).innerHTML;
      elm_array.item(i).innerHTML = '';
      var input = document.createElement('input');
      input.setAttribute('type','text');
      input.setAttribute('value',current_value);
      input.setAttribute('class','input');/*Mozilla gets this*/
      input.setAttribute('className','input');/*IE gets this*/
      elm_array.item(i).appendChild(input);
      input.focus();
    }
}
</script>

</head>
<body>
    <div>
        <h2>Adresse:</h2>
        <table class="infoset" id="address">
            <tr><th>Navn:</th><td>company</td></tr>
            <tr><th>Vej og nr:</th><td>address</td></tr>
            <tr></tr><th>Postnummer:</th><td>zipcode</td>
            <tr></tr><th>By:</th><td>city</td></tr>
        </table>
        <a href="#" onClick="instant_edit_list(this, 'address');">&laquo;&nbsp;Rediger</a>
    </div>
</body>
</html>

men så havde roenving været der... :)
Avatar billede roenving Novice
23. august 2005 - 02:53 #5
Forøvrigt kan man undgå setattribute-problemet med:

<style type="text/css">
.input{border:1px solid red;text-align:right;width:200px;}
</style>

<script type="text/javascript">
function instant_edit_list(elm, something) {
  var par = elm;
  while(par.tagName.toLowerCase() != "table")
    par = par.parentNode;
  var elm_array = par.getElementsByTagName('td');//Array of elements tagged td inside parentNode

  for (i = 0; elm_array.length > i; i++) {
    var current_value = elm_array[i].innerHTML;
    elm_array[i].innerHTML = '';
    var newInp = document.createElement('input');
    newInp.type = 'text';
    newInp.value = current_value;
    newInp.className = 'input';
    elm_array[i].appendChild(newInp);
    newInp.focus();
  }
}
</script>

<table class="infoset" id="address">
  <tr><th colspan="2"><h2>Adresse:</h2></th></tr>
  <tr><th>Navn:</th><td>company_name</td></tr>
  <tr><th>Vej og nr:</th><td>company_address</td></tr>
  <tr></tr><th>Postnummer:</th><td>company_zip</td></tr>
  <tr></tr><th>By:</th><td>company_city</td></tr>
  <tr><th colspan="2"><a href="#" onClick="instant_edit_list(this, 'address');">&laquo;&nbsp;Rediger</a></th></tr>
</table>

-- men det kommer selvfølgelig an på sammenhængen, som her er i html-dokumenter !-)
Avatar billede mickiii Nybegynder
23. august 2005 - 09:33 #6
Arhh, smukt - Jamen jeg må lige give mig selv en over næsen for det med ulovligt nestede elementer. Det burde jeg vel efterhånden kunne have sagt mig selv.

Jeg syntes at i begge bidrager til svaret, hvorfor det nok er mest rimeligt at i deler point - Smid begge et svar!
Avatar billede softspot Forsker
23. august 2005 - 10:20 #7
Svar fra mig...
Avatar billede roenving Novice
23. august 2005 - 11:30 #8
Velbekomme '-)
Avatar billede softspot Forsker
23. august 2005 - 18:19 #9
Tak for point :)
Avatar billede roenving Novice
23. august 2005 - 23:01 #10
-- også jeg takker for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester