bionic: DOM: Objekt aus table löschen

Beitrag lesen

Hi miteinander,

ich möchte gerne mit JS mittels einer Checkbox selektierte <tr> Objekte aus einer Tabelle löschen. Meine Lösung funktioniert "halbwegs" in Firefox, aber nicht im IE6. Leider werden auch nicht alle selektierten Elemente auf einen Schlag gelöscht, was eigentlich erwünscht ist. Ist das selektieren von Objekten wirklich so aufwendig, wie ich es gemacht habe?

Hier ist der Auszug aus dem Quelltext. Habt ihr eine Idee, wie ich das besser (und vor allem korrekt) lösen könnte?

Vielen Dank!

bionic

###JS-Source###
function deleteline(elem){
 for(i=0;i<document.dataform.DELETE.length;i++) {
  if(document.dataform.DELETE[i].checked){
   var Knoten = document.getElementsByTagName("table")[3].getElementsByTagName("tbody")[0].childNodes[i*2];
   document.getElementsByTagName("table")[3].getElementsByTagName("tbody")[0].removeChild(Knoten);
  }
 }
}

###HTML-Auszug###

<table>
    <thead>
     <tr>
      <td style="display: none;">Number</td>
      <td class="searchcategories">1</td>
      <td class="searchcategories" style="width: 80px;">2</td>
      <td class="searchcategories" style="width: 80px;">3</td>
      <td class="searchcategories" style="width: 40px;">Delete</td>
     </tr>
    <tbody id="list">
     <tr>
      <td style="display: none;">1</td>
      <td class="searchresultsborder"><input class="class1" name="GTR1" value="asdfasdf" readonly="readonly" type="text"></td>
      <td class="searchresultsborder"><input class="class1" name="HUZ1" value="" readonly="readonly" type="text"></td>
      <td class="searchresultsborder"><input class="class1" name="POT1" value="" readonly="readonly" type="text"></td>
      <td class="searchselect"><input name="DELETE" type="checkbox"></td>
     </tr>
     <tr>
      <td style="display: none;">2</td>
      <td class="searchresultsborder"><input class="class1" name="GTR2" value="asdfasdf" readonly="readonly" type="text"></td>
      <td class="searchresultsborder"><input class="class1" name="HUZ2" value="" readonly="readonly" type="text"></td>
      <td class="searchresultsborder"><input class="class1" name="POT2" value="" readonly="readonly" type="text"></td>
      <td class="searchselect"><input name="DELETE" type="checkbox"></td>
     </tr>
     <tr>
      <td style="display: none;">3</td>
      <td class="searchresultsborder"><input class="class1" name="GTR3" value="asdfasdf" readonly="readonly" type="text"></td>
      <td class="searchresultsborder"><input class="class1" name="HUZ3" value="" readonly="readonly" type="text"></td>
      <td class="searchresultsborder"><input class="class1" name="POT3" value="" readonly="readonly" type="text"></td>
      <td class="searchselect"><input name="DELETE" type="checkbox"></td>
     </tr>
     <tr>
      <td style="display: none;">4</td>
      <td class="searchresultsborder"><input class="notindb" name="GTR4" value="asdfasdf" readonly="readonly" type="text"></td>
      <td class="searchresultsborder"><input class="class1" name="HUZ4" value="" readonly="readonly" type="text"></td>
      <td class="searchresultsborder"><input class="class1" name="POT4" value="" readonly="readonly" type="text"></td>
      <td class="searchselect"><input name="DELETE" type="checkbox"></td>
     </tr>
     <tr>
      <td style="display: none;">5</td>
      <td class="searchresultsborder"><input class="notindb" name="GTR5" value="asdfasdf" readonly="readonly" type="text"></td>
      <td class="searchresultsborder"><input class="class1" name="HUZ5" value="" readonly="readonly" type="text"></td>
      <td class="searchresultsborder"><input class="class1" name="POT5" value="" readonly="readonly" type="text"></td>
      <td class="searchselect"><input name="DELETE" type="checkbox"></td>
     </tr>
    </tbody>
    <tfoot>
     <tr>
      <td colspan="5" style="text-align: right;"><a href="javascript:deleteline();" class="bluebold">delete selection</a></td>
     </tr>
    </tfoot>
   </table>