✔ onclick Textfarbe ändern

B

Brauni

Erfahrenes Mitglied
Hallo

Ich habe eine Tabelle wie z.B. hier:
Code: 
<table width="149" border="0">
  <tr>
    <td width="83">test1</td>
    <td width="56"><input type="checkbox" name="checkbox1" id="checkbox1" /></td>
  </tr>
  <tr>
    <td>test2</td>
    <td><input type="checkbox" name="checkbox1" id="checkbox2" /></td>
  </tr>
  <tr>
    <td>test3</td>
    <td><input type="checkbox" name="checkbox1" id="checkbox3" /></td>
  </tr>
</table>
Wenn ich nun z.B auf die Checkbox1 klicke, soll sich die Schriftfarbe von test1 in rot ändern. Bei klick auf Checkbox3 soll test3 die Schriftfarbe in rot ändern.
Ist die möglich?

Würd mich über Infos freuen! :)
 
Hi,

du könntest dich von der Checkbox ausgehend über die Eigenschaften parentNode zur zugehörigen Zeile im Dokumentenbaum nach oben hangeln. Dort angekommen setzt du über die cells-Kollektion und die Style-Eigenschaft color die gewünschte Farbe.

Beispiel:
Code: 
<td width="56"><input type="checkbox" name="checkbox1" id="checkbox1" onclick="this.parentNode.parentNode.cells[0].style.color='#f00';" /></td>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
sieht super aus :)
Mir fällt gerade ein, das wenn ich nochmal drauf klice, soll der Text wieder schwarz sein.
 
Hi,

prüfe, ob die auslösende Checkbox gesetzt (checked ist true) bzw. nicht gesetzt (false) ist und setze entsprechend die Farbe.

Ciao
Quaese
 
oh perfekt danke.
Bin kein Javascript Typ. Kurz nachgegoogelt und gefunden:
Code: 
onclick="if (this.checked) {this.parentNode.parentNode.cells[0].style.color='#FF0000'} else {this.parentNode.parentNode.cells[0].style.color='#000000'};"

funktioniert einwandfrei danke für deine Hilfe! :)
 
Hi,

sieht ja sehr gut aus!

Fall du magst, es geht noch etwas kürzer:
Code: 
onclick="this.parentNode.parentNode.cells[0].style.color=(this.checked)?'#f00':'#000';"
Ciao
Quaese
 
Hallo

eines ist mir eben noch eingefallen wo ich nciht weiter komme in diesem Zusammenhang.
Wenn ich den Text ausgewählt habe und auf einen Button klicke, übergebe will ich den angeklickten Text in eine neue php Datei übergeben. z.B. wenn ich auf die Checkbox klicke, wird in ein Textfeld der Text hineingeschrieben. Den kann ich ja dann ohne Probleme übernehmen.
Ist dies möglich?
 
Zuletzt bearbeitet:
Hi,

das ist möglich. Ich würde die Routine allerdings in eine Funktion packen und diese vom onclick-Event aufrufen.

Die Funktion regelt neben der Farbsetzung auch die Übernahme bzw. das Löschen des Zellentextes in bzw. aus dem Textfeld. Voraussetzung für das folgende Beispiel ist ein Textfeld mit der ID txtInputId.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function doSomething(objSrc){
  // Zellenobjekt ermitteln
  var objCell = objSrc.parentNode.parentNode.cells[0];

  // Falls die Checkbox gewählt ist
  if(objSrc.checked){
    // Farbe setzen
    objCell.style.color = "#f00";
    // Text in Textfeld schreiben
    document.getElementById("txtInputId").value += objCell.innerHTML;
  // Falls Checkbox nicht gewählt
  }else{
    // Farbe setzen
    objCell.style.color = "#000";
    // Zellentext in Textfeld löschen
    document.getElementById("txtInputId").value = document.getElementById("txtInputId").value.replace(new RegExp(objCell.innerHTML), "");
  }
}
 //-->
</script>
</head>
<body>
<table width="149" border="0">
  <tr>
    <td width="83">test1</td>
    <td width="56"><input type="checkbox" name="checkbox1" id="checkbox1" onclick="doSomething(this);" /></td>
  </tr>
  <tr>
    <td>test2</td>
    <td><input type="checkbox" name="checkbox1" id="checkbox2" onclick="doSomething(this);" /></td>
  </tr>
  <tr>
    <td>test3</td>
    <td><input type="checkbox" name="checkbox1" id="checkbox3" onclick="doSomething(this);" /></td>
  </tr>
</table>
<input type="text" name="txtInput" id="txtInputId" value="">
</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
wow cool

bin allerdings auf ein kleines Problem draufgekommen:
Wenn man mehrere Checkboxen und Felder nebeneinander hat, wird immer nur die ganz linke Spalte verändert und nicht die links neben der Checkbox. Was ich nicht ganz verstehe, da ich mir ja die ID hole oder?

Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function doSomething(objSrc){
  // Zellenobjekt ermitteln
  var objCell = objSrc.parentNode.parentNode.cells[0];

  // Falls die Checkbox gewählt ist
  if(objSrc.checked){
    // Farbe setzen
    objCell.style.color = "#f00";
    // Text in Textfeld schreiben
    document.getElementById("txtInputId").value += objCell.innerHTML;
  // Falls Checkbox nicht gewählt
  }else{
    // Farbe setzen
    objCell.style.color = "#000";
    // Zellentext in Textfeld löschen
    document.getElementById("txtInputId").value = document.getElementById("txtInputId").value.replace(new RegExp(objCell.innerHTML), "");
  }
}
 //-->
</script>
</head>
<body>
<table width="269" border="0">
  <tr>
    <td width="83">test1</td>
    <td width="56"><input type="checkbox" name="checkbox2" id="checkbox1" onclick="doSomething(this);" /></td>
    <td width="56">a</td>
    <td width="56"><input type="checkbox" name="checkbox4" id="checkbox4" onclick="doSomething(this);" /></td>
  </tr>
  <tr>
    <td>test2</td>
    <td><input type="checkbox" name="checkbox3" id="checkbox2" onclick="doSomething(this);" /></td>
    <td>b</td>
    <td><input type="checkbox" name="checkbox5" id="checkbox5" onclick="doSomething(this);" /></td>
  </tr>
  <tr>
    <td>test3</td>
    <td><input type="checkbox" name="checkbox1" id="checkbox3" onclick="doSomething(this);" /></td>
    <td>c</td>
    <td><input type="checkbox" name="checkbox6" id="checkbox6" onclick="doSomething(this);" /></td>
  </tr>
</table>
<input type="text" name="txtInput" id="txtInputId" value="">
</body>
</html>
 
Hi,

nein, du holst dir nicht die ID, sondern die erste Zelle der Zeile, in der sich die Checkbox befindet.
Code: 
objSrc.parentNode.parentNode.cells[0] // Index 0 entspricht der ersten Zelle o. Spalte
Um dein Vorhaben zu realisieren, könntest du im Funktionsaufruf jeweils den Index der Zelle (Spalte), die verändert werden soll, mit übergeben.

Beispiel für eine Zeile:
Code: 
  <tr>
    <td width="83">test1</td>
    <td width="56"><input type="checkbox" name="checkbox2" id="checkbox1" onclick="doSomething(this, 0);" /></td>
    <td width="56">a</td>
    <td width="56"><input type="checkbox" name="checkbox4" id="checkbox4" onclick="doSomething(this, 2);" /></td>
  </tr>
Die Funktion wird dahingehend verändert, dass sie zum einen den gewünschten Spaltenindex entgegennimmt und mit diesem die passende Zelle ermittelt.
Code: 
function doSomething(objSrc, intCell){
  // Zellenobjekt ermitteln
  var objCell = objSrc.parentNode.parentNode.cells[intCell];

  // Falls die Checkbox gewählt ist
  if(objSrc.checked){
    // Farbe setzen
    objCell.style.color = "#f00";
    // Text in Textfeld schreiben
    document.getElementById("txtInputId").value += objCell.innerHTML;
  // Falls Checkbox nicht gewählt
  }else{
    // Farbe setzen
    objCell.style.color = "#000";
    // Zellentext in Textfeld löschen
    document.getElementById("txtInputId").value = document.getElementById("txtInputId").value.replace(new RegExp(objCell.innerHTML), "");
  }
}
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück