✔ TabellenZeile markieren über Checkbox

Gray

Gray

Erfahrenes Mitglied
Hi, ich hab leider nur minimal ahnung von Javascript.

ich möchte das ich eine dynamisch erstellte Tabelle jeweils vor jeder Zeile eine Checkbox habe und wenn ich diese anklicken, die entsprechende Zeile amrkiert wird (Farbig anderer Hintergrund)

so:

[ ] zelle1 zelle2 zelle3
[X] zelle1 zelle2 zelle3
[ ] zelle1 zelle2 zelle3
[ ] zelle1 zelle2 zelle3
 
Hi,

ich gehe davon aus, dass die Checkbox sich ebenfalls in der Tabelle befinden (in jeweils
der ersten Zelle einer Spalte) und der Hintergrund nicht mit gefärbt werden soll.

Du könntest den Checkboxen als Wert (value) jeweils die Nummer der zugehörigen Zeile
(die erste Zeile hat hierbei die Zeilennummer 0) zuweisen. Wird eine Checkbox geändert,
prüfst du, ob sie gesetzt oder abgewählt wurde.
Anschliessend ermittelst du mit Hilfe des Objekts row die Zeilen der Tabelle. In der
gewünschten Zeile durchläufst du unter Zuhilfenahme des JS-Objektes cells die Zellen
und änderst deren Hintergrundfarbe über deren CSS-Eigenschaften.

Beispiel:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
// Gewünschte Hintergrundfarbe
var colorBG = "#e2e9e9"

function markRow(objCheckbox){

  // Falls die Checkbox angewählt wurde
  if(objCheckbox.checked == true){
    colorRow = colorBG;
  }else{
    colorRow = "";
  }

  // Tabellenzeile ermitteln
  objRow = document.getElementById('tableID').rows;

  // Alle Zellen durchlaufen
  for(var i=1; i<objRow[objCheckbox.value].cells.length; i++){
    objRow[objCheckbox.value].cells[i].style.backgroundColor = colorRow;
  }
}
//-->
</script>

<style type="text/css">
  <!--
body{ background: #efefef;}
#tableID{ }
#tableID td{ border-right: 1px solid #AFAFAF;
             cellpadding: 0;}
#tableID td.inhaltTD, #tableID td.inhaltBottomTD{ border-top: 1px solid #AFAFAF;
                                                  border-right: 1px solid #AFAFAF;
                                                  cellpadding: 0;
                                                  width: 100px;}
#tableID td.inhaltBottomTD{ border-bottom: 1px solid #AFAFAF;}
  -->
</style>
</head>
<body>
<table cellspacing="0" id="tableID">
	<tr>
	  <td><input type="checkbox" value="0" onclick="markRow(this);" /></td>
	  <td class="inhaltTD">Zelle (0,0)</td>
	  <td class="inhaltTD">Zelle (0,1)</td>
	  <td class="inhaltTD">Zelle (0,2)</td>
	</tr>
	<tr>
	  <td><input type="checkbox" value="1" onclick="markRow(this);" /></td>
	  <td class="inhaltTD">Zelle (1,0)</td>
	  <td class="inhaltTD">Zelle (1,1)</td>
	  <td class="inhaltTD">Zelle (1,2)</td>
	</tr>
	<tr>
	  <td><input type="checkbox" value="2" onclick="markRow(this);" /></td>
	  <td class="inhaltBottomTD">Zelle (2,0)</td>
	  <td class="inhaltBottomTD">Zelle (2,1)</td>
	  <td class="inhaltBottomTD">Zelle (2,2)</td>
	</tr>
</table>
</body>
</html>
Ciao
Quaese
 
wie kann ich es machen, das es auch die Zelle in der die Checkbox ist markiert?

Und eine Checkbox mit der ich alles markiert bekomme?
 
Hi,

um die Checkbox-Zelle ebenfalls mit zu markieren, weist du i in der for-Schleifen-Bedingung
(for(var i=1; i<objRow ...) statt 1 den Wert 0 zu.

Um die ganze Tabelle zu markieren, änderst du den Hintergrund der gesamten Tabelle in Abhängigkeit
der entsprechenden Checkbox.
Code: 
function markAll(objCheckbox){
  // Falls die Checkbox angewählt wurde
  if(objCheckbox.checked == true){
    colorRow = colorBG;
  }else{
    colorRow = "";
  }

  // Tabellenzeile ermitteln
  objRow = document.getElementById('tableID').style.backgroundColor = colorRow;
}
Ciao
Quaese
 
Ein neues Problem hat sich aufgetan, da ich den Checkboxen nun Dynamische Namen für ein PHP Script zuweisen musst funktioniert das Javascript nicht mehr, der IE gibt mir folgende Fehlermeldung:

'obRow[...].cells' ist NUll oder kein Objekt

was kann ich da tun?
 
Hi,

da das Script unabhängig vom Namen der Checkboxen arbeitet, kann die dynamische Zuweisung
der Namen auch nicht das Problem verursachen. Nur wenn der Wert des value-Attribut dynamisch
angelegt wird, wird es problematisch.

Sollte deine Fehlermeldung genau so erscheinen, wie du gespostet hattest, könnte die Ursache
ein Tippfehler sein. Im Script gibt es lediglich eine Variable objRow.

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück