• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Tabellen Zelle Löschen

B

BloosyMavis

New member
Hallo liebe JS-Gemeinde =)

Ich habe ein Problem: ich habe 2 Tabellen , in die eine Trage ich daten ein und von dieser werden die daten aus der 1.Spalte in die 1.Spalte der 2.tabelle gespeichert. (Funktioniert!). Dort kann ich Daten in die 2. Spalte eintragen (Funktioniert!), ich möchte diese aber auch wieder per Knopfdruck löschen (also nur die Zelle) und so löschen das sich die Zahl in der 1.Spalte nicht ändert oder beim hinzufügen neuer Daten dann eine reihe übersprungen wird. Habs es mit deleteCell versucht aber da stand immer das dies keine funktion sei, leider weiß ich auch nicht wie ich die Reihen die ich neu hinzufüge ansprechen soll da diese ja keine id oder so haben. Kann jemand helfen?

Dankeschön und liebe Grüße

HTML: 
<input type="text" id="person"><input type="button" onclick="add_tab1()" value="OK">
<table id="tab1>
  <tr>
    <th>Nr.</th>
    <th>Person</th>
  </tr>
</table>
<input type="button" onclick="delete_tab1()" value="letzten Eintrag löschen">

<input type="text" id="adresse"><input type="button" onclick="add_tab2()" value="OK">
<table id="tab2>
  <tr>
    <th>Nr. aus Tab1</th>
    <th>Adresse</th>
  </tr>
</table>
<input type="button" onclick="delete_tab2()" value="letzten Eintrag löschen">


Code: 
var t1 = 1;
function add_tab1() {
     
    if(document.getElementById("person").value == ""){
        alert("Bitte alle Felder ausf\u00fc\llen!");             
    }else{
    var tab1 = document.getElementById("tab1");
    var tab2 = document.getElementById("tab2");
    
    var tr1 = tab1.insertRow(-1);
    var td11 = tr1.insertCell(0);
    var td12 = tr1.insertCell(1);;
     
    var tr2 = tab2.insertRow(-1);
    var td21 = tr2.insertCell(0);
       
    td11.innerHTML = t1;
    td12.innerHTML = document.getElementById("Daten3").value;
    
    td21.innerHTML = t1;
     
    }
    t1 = t1 + 1;
}

var c = 1;
function add_tab2() {
    var tab2 = document.getElementById("tab2");
      
    if(document.getElementById(adresse").value == ""){
        alert("Bitte die 'Adresse' ausf\u00fc\llen!");          
    }else{    
        var tr = table.rows[c]
        var td2 = tr.insertCell(1);
        td2.innerHTML = document.getElementById("adresse").value;
        c = c + 1;
     }
}

function delete_tab1() {
    var tab1 = document.getElementById("tab1");
    var tr1 = tab1.rows.length;
     
    var tab2 = document.getElementById("tab2");
    var tr2 = tab2.rows.length;
     
    if (tr1 > 1){
        tab1.deleteRow(tr1-1);
        tab2.deleteRow(tr2-1);
    }     
    t3 = t3 - 1;
}

function delete_tab2(){
 var tab2 = document.getElementById("tab2");
 var tr = tab2.rows.lenght;
 
???????????????????????????????????????????
}
 
Code: 
function delete_tab2(){
var tab2 = document.getElementById("tab2");
var tr = tab2.rows.lenght;
var row = document.getElementsByTagName("tr");

if (tr > 1){
row.deleteCell(tr-1);
}

}
 
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript" src="/kkjs/modules/kkjs.load.js"></script>
<style type="text/css"></style>
</head>
<body>
<table id="table">
	<thead>
		<tr>
			<th>1</th>
			<th>2</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
<button id="add">add row</button>
<script type="text/javascript">

document.getElementById("add").addEventListener("click", function(){
	var counter = 0;
	return function(){
		var table = document.getElementById("table");
		var tbody = table.tBodies[0];
		if (tbody){
			counter += 1;
			var row = document.createElement("tr");
			var td1 = document.createElement("td");
			td1.innerHTML = counter;
			row.appendChild(td1);
			var td2 = document.createElement("td");
			var button = document.createElement("button");
			button.innerHTML = "remove";
			button.addEventListener("click", function(){
				tbody.removeChild(row);
			}, false);
			td2.appendChild(button);
			row.appendChild(td2);
			tbody.appendChild(row);
		}
	}
}(), false);
</script>
</body>
</html>
 
okay danke aber kann man das nicht mit deleteCell() machen?

hab viele von diesen Tabellen und möcht ungern alles umschreiben und diese "neue" Art noch mit hinbringen
 
OK - dann hab' ich dich falsch verstanden.

Mach' doch einfach mal ein paar Bildchen, wie das nach jedem Schritt aussehen soll.
 
Hier die Bildliche darstellung:

Schritt 1: Namen der Person eingeben -> OK klicken -> neue reihe wird in tabelle erstellt , Nr. wird automatisch vergeben bei tab1 und tab 2 (Anzahl reihen sollen die selben sein!) + Name der Person

Schritt 2: Adresse eingeben -> OK klicken -> durch Schritt sind reihen und Nr. schon da, also nur Adresse in 2.Spalte eintragen

Schritt 3: Beim klicken wird letzte reihe der tab 1 + der tab 2 gelöscht

Schritt 4: beim klicken nur die letzte Zelle der 2. Spalte (Adresse) der tab2 löschen , Nr. soll bestehen bleiben wegen tab1!

alle Schritte funktionieren außer Schritt 4 :-(
 

Anhänge

  • Unbenannt.png
    Unbenannt.png
    16,1 KB · Aufrufe: 5
Es wäre noch gut, wenn du deine Lösung hier präsentieren könntest. Dann haben auch kommende Suchende etwas davon.
 
Habe mit .setAttribute() den eingefügten reihen und Zellen eine ID übergeben und dann statt die Zellen zu löschen, über die ID und einen Zähler, nur den Inhalt entfernt, so kann ich neuen Inhalt auch ganz leicht neu einfügen mit der add_tab2()-Funktion

Code: 
var t1 = 1;
var t2 = 0;
function add_tab1() {
     
    if(document.getElementById("person").value == ""){
        alert("Bitte alle Felder ausf\u00fc\llen!");             
    }else{
    var tab1 = document.getElementById("tab1");
    var tab2 = document.getElementById("tab2");
    
    var tr1 = tab1.insertRow(-1);
    var td11 = tr1.insertCell(0);
    var td12 = tr1.insertCell(1);;
     
    var tr2 = tab2.insertRow(-1);
    tr2.setAttribute("id","row2_" + t2);
    var td21 = tr2.insertCell(0);
    var td22 = tr2.insertCell(1);
    td22.setAttribute("id","cell2_" + t2);
       
    td11.innerHTML = t1;
    td12.innerHTML = document.getElementById("Daten3").value;
    
    td21.innerHTML = t1;
     
    }
    t1 = t1 + 1;
    t2 = t2 + 1;
}

var c = 1;
var c2 = 0;
function add_tab2() {
    var tab2 = document.getElementById("tab2");
      
    if(document.getElementById(adresse").value == ""){
        alert("Bitte die 'Adresse' ausf\u00fc\llen!");          
    }else{    
        var tr = table.rows[c]
        var td2 = document.getElementById("cell2_" + c);
        td2.innerHTML = document.getElementById("adresse").value;
        c = c + 1;
        c2 = c2 + 1;
     }
}

function delete_tab1() {
    var tab1 = document.getElementById("tab1");
    var tr1 = tab1.rows.length;
     
    var tab2 = document.getElementById("tab2");
    var tr2 = tab2.rows.length;
     
    if (tr1 > 1){
        tab1.deleteRow(tr1-1);
        tab2.deleteRow(tr2-1);
    }     
    t3 = t3 - 1;
}

function delete_tab2(){
 var td2 = document.getElementById("cell2_" + c2);
 td2.innerHTML = "";

c = c - 1;
c2 = c2 - 1;
}
 
Kleine Bemerkungen zum Code:
1. Besser und leichter zu lesen ist es, wenn du die ID direkt un nicht über .setAttribute(), was man eigentlich sehr selten verwenden muss (und meiner Meinung auch nicht verwenden soll), vergibst:
Code: 
tr2.id = "row2_" + t2;

2. Deine globalen Variablen werden dir ziemlich sicher noch Probleme bereiten (v.A. weil die Namen nicht besonders aussagekräftig und eindeutig sind). Versuche die zu vermeiden. In deinem Fall kannst du einen Funktionsscope machen und die benötigten Funktionen daraus zu "exportieren".
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben