Tabellenzeile mit Array-Element löschen
centauro
- javascript
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+']);>Ändern</a>\n\n';
cell2.innerHTML = '<a onclick=textAendern('+i+');>Ä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ß an der Fahrzeugfront stattgefunden, so daß " <?php echo ($vorne_mitte<>"") ? "CHECKED" : "" ?> onclick="treffe_auswahl(this)"></label></td><td width="10%"> </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ß am Fahrzeugdach stattgefunden, so daß" <?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
Anbei das Script:
Das leider so nicht funktioniert
Struppi.
uuuuuuuuuund.....warum?
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+']);>Ändern</a>\n\n';
cell2.innerHTML = '<a onclick=textAendern('+i+');>Ä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ß an der Fahrzeugfront stattgefunden, so daß " onclick="treffe_auswahl(this)"></label></td><td width="10%"> </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ß am Fahrzeugdach stattgefunden, so daß" 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
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.
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
Hat sich alles erledigt.
PROBLEM SELBST GELÖST! ;-)
Trotzdem vielen Dank!
Gruß,
centauro
kann niemand mehr helfen???