centauro: Tabellenzeile mit Array-Element löschen

Hallo Forum,

ich habe ein Script, mit dem ich per Checkbox einen vorgegebenen Text an eine Prompt-Box übergebe, diesen dann erweitere und den erweiterten Text in ein Array als Element schreibe.

Nachdem das Array-Element geschrieben wurde, wird es dann in eine HTML-Tabelle und zwar in die erste Zelle eingetragen.

Dem übertragenen Text füge ich automatisch ein Änderungslink bei, der in eine eigene Zelle geschrieben wird. Dieser Link öffnet bei Klick darauf eine Prompt-Box, die den Inhalt des entsprechenden Zelltext anzeigt und zum Ändern zur Verfügung macht. Bei Klick auf OK wird der vorhandene Text mit dem geänderten Text überschrieben.

Nun möchte ich die Möglichkeit haben die Zeilen wieder zu löschen, indem ich lediglich das Häkchen wieder aus der Checkbox entferne.

Leider ist es zurzeit nur teilweise möglich und funktioniert auch nicht richtig, da die Zeilen nicht wirklich gelöscht werden und andererseits werden auch die falschen Zeilen gelöscht. Zudem werden die übrig gebliebenen Zeilen auch nicht ganz gelöscht, sondern lediglich der Inhalt.

Anbei das Script:

  
<script type="text/javascript">  
<!--  
  
var daten = new Array();  
function treffe_auswahl(auswahl) {  
 //Table-element und Zellendefinition  
  
   var w=95+'%';  
            var table = document.getElementsByTagName("table")[6];  
            var row = table.insertRow(-1); // -1 = am ende  
            var cell = row.insertCell(-1);  
       cell.style.width=w;  
    cell.style.wordWrap='break-word';  
   var cell2 = row.insertCell(-1);  
  
   for (var i = 0; i < daten.length; i++) {  
    if (daten[i].indexOf(auswahl.value) > -1) {  
     row.setAttribute('id', 'row'+i);  
    }  
   }  
  
  
 //Ende  
 if (auswahl.checked) {  
  var neuer_string = auswahl.value + '\n' + prompt(auswahl.value, '');  
  daten.push(neuer_string);  
  //Table-element  
  document.getElementById('idNode').value = daten[1];  
  
  //Ende  
  
  checkbox();  
 }  
 else {  
  for (var i = 0; i < daten.length; i++) {  
   if (daten[i].indexOf(auswahl.value) > -1) {  
    document.getElementById("idNode").deleteRow(i);  
    daten.splice(i, 1);  
  
   }  
  }  
 }  
  
 for (var i = 0; i < daten.length; i++) {  
              var farbe = (i % 2) ? "#84c1de" : "#FFFFFF";  
    row.setAttribute("bgcolor",farbe);  
  
  if (daten[i].indexOf(auswahl.value) > -1) {  
  
//  cell2.innerHTML = '<a onClick=textAendern(daten['+i+']);>&Auml;ndern</a>\n\n';  
  cell2.innerHTML = '<a onclick=textAendern('+i+');>&Auml;ndern</a>\n\n';  
  cell.innerHTML = daten[i];  
 }  
}  
  
 }  
//}  
//-->  
</script>  
<script type="text/javascript">  
  
function textAendern(nnode) {  
// alert(nnode);  
 for (i=0; i<=nnode; i++) {  
  
    if (i==nnode) {  
  nnode=i+1;  
  var x=document.getElementById('idNode').rows  
     var y=x[nnode].cells  
  var old_txt = y[0].innerHTML;  
  var new_txt = prompt('Bitte geben Sie den neuen Text ein', old_txt)  
     y[0].innerHTML=new_txt;  
  exit;  
  }  
 }  
}  
  
</script>  
<table border="1">  
<tr><td>  
<label for="vorne_mitte"><input name="vorne_mitte" id="vorne_mitte" type="checkbox" title="Vorne mitte" value="Dem Besichtigungseindruck nach zu urteilen, hat ein Ansto&szlig; an der Fahrzeugfront stattgefunden, so da&szlig; " <?php echo ($vorne_mitte<>"") ? "CHECKED" : "" ?> onclick="treffe_auswahl(this)"></label></td><td width="10%">&nbsp;</td>  
     <td width="300" align="center"><label for="fahrzeugdach_vorne"><input name="fahrzeugdach_vorne" id="fahrzeugdach_vorne" type="checkbox" title="Fahrzeugdach vorne" value="Dem Besichtigungseindruck nach zu urteilen, hat ein Ansto&szlig; am Fahrzeugdach stattgefunden, so da&szlig;" <?php echo ($fahrzeugdach_vorne<>"") ? "CHECKED" : "" ?> onclick="treffe_auswahl(this)"></label>  
</td>  
</tr>  
</table>  
  
<div style="height: 200px;overflow-y: scroll">  
 <table id="idNode" border="2">  
  
   </table>  
</div>  

Es wäre klasse, wenn mir jemand weiterhelfen könnte.

Besten Dank an alle.

Gruß,

Centauro

  1. Anbei das Script:

    Das leider so nicht funktioniert

    Struppi.

    1. uuuuuuuuuund.....warum?

      1. Soooo....jetzt funktionierts, bei mir im Firefox.

          
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
        <html>  
         <head>  
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
          <title>Untitled Document</title>  
         <script type="text/javascript">  
         <!--  
          
         var daten = new Array();  
         function treffe_auswahl(auswahl) {  
          //Table-element und Zellendefinition  
          
            var w=95+'%';  
                     var table = document.getElementsByTagName("table")[0];  
                     var row = table.insertRow(-1); // -1 = am ende  
                     var cell = row.insertCell(-1);  
                cell.style.width=w;  
             cell.style.wordWrap='break-word';  
            var cell2 = row.insertCell(-1);  
          
            for (var i = 0; i < daten.length; i++) {  
             if (daten[i].indexOf(auswahl.value) > -1) {  
              row.setAttribute('id', 'row'+i);  
             }  
            }  
          
          
          //Ende  
          if (auswahl.checked) {  
           var neuer_string = auswahl.value + '\n' + prompt(auswahl.value, '');  
           daten.push(neuer_string);  
           //Table-element  
           document.getElementById('idNode').value = daten[1];  
          
           //Ende  
          
          }  
          else {  
           for (var i = 0; i < daten.length; i++) {  
            if (daten[i].indexOf(auswahl.value) > -1) {  
             document.getElementById("idNode").deleteRow(i);  
             daten.splice(i, 1);  
          
            }  
           }  
          }  
          
          for (var i = 0; i < daten.length; i++) {  
                       var farbe = (i % 2) ? "#84c1de" : "#FFFFFF";  
             row.setAttribute("bgcolor",farbe);  
          
           if (daten[i].indexOf(auswahl.value) > -1) {  
          
         //  cell2.innerHTML = '<a onClick=textAendern(daten['+i+']);>&Auml;ndern</a>\n\n';  
           cell2.innerHTML = '<a onclick=textAendern('+i+');>&Auml;ndern</a>\n\n';  
           cell.innerHTML = daten[i];  
          }  
         }  
          
          }  
         //}  
         //-->  
         </script>  
         <script type="text/javascript">  
          
         function textAendern(nnode) {  
         // alert(nnode);  
          for (i=0; i<=nnode; i++) {  
          
             if (i==nnode) {  
           nnode=i+1;  
           var x=document.getElementById('idNode').rows  
              var y=x[nnode].cells  
           var old_txt = y[0].innerHTML;  
           var new_txt = prompt('Bitte geben Sie den neuen Text ein', old_txt)  
              y[0].innerHTML=new_txt;  
           exit;  
           }  
          }  
         }  
          
         </script>  
         </head>  
         <body>  
        <form>  
         <table border="1">  
         <tr><td>  
         <label for="vorne_mitte"><input name="vorne_mitte" id="vorne_mitte" type="checkbox" title="Vorne mitte" value="Dem Besichtigungseindruck nach zu urteilen, hat ein Ansto&szlig; an der Fahrzeugfront stattgefunden, so da&szlig; "  onclick="treffe_auswahl(this)"></label></td><td width="10%">&nbsp;</td>  
              <td width="300" align="center"><label for="fahrzeugdach_vorne"><input name="fahrzeugdach_vorne" id="fahrzeugdach_vorne" type="checkbox" title="Fahrzeugdach vorne" value="Dem Besichtigungseindruck nach zu urteilen, hat ein Ansto&szlig; am Fahrzeugdach stattgefunden, so da&szlig;" onclick="treffe_auswahl(this)"></label>  
         </td>  
         </tr>  
         </table>  
          
         <div style="height: 200px;overflow-y: scroll">  
          <table id="idNode" border="2">  
          
            </table>  
         </div>  
         </form>  
         </body>  
        </html>  
          
        
        

        Nur das löschen der richtigen Zeilen durch entfernen des Häkchens, wie gesagt, funktioniert nicht.

        Gruß,

        Centauro

        1. Soooo....jetzt funktionierts, bei mir im Firefox.

          Ja, aber mit einer Fehlermeldung (du kennst die Fehlerkonsole?)

          Fehler: uncaught exception: [Exception... "Index or size is negative or greater than the allowed amount"  code: "1" nsresult: "0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)"  location: .../tmp.html Line: 41"]

          Line 41 ist:
          document.getElementById("idNode").deleteRow(i);

          Struppi.

          1. Selbstverständlich benutze ich die Fehlerkonsole um Fehler zu sehen und zu beseitigen.

            Jo, das liegt am falschen Tabellen-Index.
            Es sollte so heißen:

              
            RICHTIG             var table = document.getElementsByTagName("table")[1];  
            
            

            und nicht

              
            FALSCH             var table = document.getElementsByTagName("table")[0];  
            
            

            Dann kommt auch keine Fehlermeldung mehr.

            Dennoch wird die Zeile beim Aushaken der Checkbox nicht gelöscht.

            Gruß,

            centauro

            1. Hat sich alles erledigt.
              PROBLEM SELBST GELÖST! ;-)

              Trotzdem vielen Dank!

              Gruß,

              centauro

  2. kann niemand mehr helfen???