Ergebnis 1 bis 2 von 2
  1. #1
    Gerbil ist offline Grünschnabel
    registriert
    24-10-2012
    Beiträge
    1

    Dynamische Tabelle mit DOM-Scripting

    Hallo,

    ich möchte gerne eine dynamische Tabelle erstellen.

    Die Tabelle soll später immer eine Überschrift haben und 3 Zeilen dazu anzeigen -> momentan nur eine kleine Beispieltabelle vorhanden.

    Über 2 Buttons die sich über der Tabelle befinden, nämlich + und - sollen entweder Tabellenzeilen hinzugefügt oder gelöscht werden.

    Die Funktion mit dem Hinzufügen funktioniert bisher ganz gut, nur mit der löschenfunktion habe ich probleme.

    Code:
    <html>
    <head>
    <title>blub</title>
    
    <script language="JavaScript">
    	
    	function add(){
    	//alert("add aufgerufen");
    	
    	var rowNr = 11;
    	var colNr = 2;
    
    	var formTable = document.getElementById("formTable").getElementsByTagName("tbody")[0];
    	var body = document.getElementsByTagName("body")[0];
    	var tabelle = document.getElementsByTagName("table")[0];
    
    	for(var i = 0; i<rowNr; i++)
    		{
    			var newRow = document.createElement("tr");
    		}
    		for(var j = 0; j<colNr; j++)
    			{
    				var newCol1 = document.createElement("td");
    				newCol1.innerHTML = "Blub";
    				newCol1.setAttribute("border", "1px solid black");
    				newRow.appendChild(newCol1);
    			}
    
    	formTable.appendChild(newRow);
    	}
    		
    	function remove(){
    
    }
    	}
    </script>
    </head>
    <body>
    <h1> test </h1>
    <form>
    	<input type="button" name="+" value="+" onclick="add();">
    	<input type="button" name="-" value="-" onclick="remove();">
    </form>
    	<table id="formTable">
    		<tr>
    			<th></th>
    			<th></th>
    		</tr>
    	</table>
    </body>
    </html>
    Danke schonmal für eure Hilfe

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Dynamische Tabelle mit DOM-Scripting

    Schmeiss das language weg und ein Dokument braucht einen Doctype.

    Das ganze geht deutlich einfacher:
    HTML-Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>blub</title>
    
    <script type="text/javascript">
    function addCells(row, nr, inhalt) {
    	
    	for(var i = 0; i < nr; i++) {
    		var tmp = row.insertCell(i);
    		tmp.innerHTML = inhalt;
    	}
    	
    }
    	
    function add(id){
    	var formTable = document.getElementById("formTable").tBodies[0];
    	
    	var row = formTable.insertRow(formTable.rows.length);
    	addCells(row, 2, 'blub');
    }
    function remove(id, wo) {
    	var formTable = document.getElementById("formTable").tBodies[0];
    	var row = formTable.deleteRow(wo ? formTable.rows.length - 1 : 0);
    }
    
    
    </script>
    </head>
    <body>
    <h1> test </h1>
    <form>
    	<input type="button" name="+" value="+" onclick="add('formTable');">
    	<input type="button" name="-" value="-" onclick="remove('formTable');">
    </form>
    
    	<table id="formTable">
    		<tr>
    			<th></th>
    			<th></th>
    		</tr>
    	</table>
    </body>
    </html>

Ähnliche Themen

  1. Dynamische Tabelle funktioniert bei IE nicht!
    Von Broox im Forum JavaScript
    Antworten: 13
    Letzter Beitrag: 14-02-2011, 00:38
  2. dynamische Tabelle mit onclick(event)
    Von chappy_berlin im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 30-05-2010, 13:05
  3. Mainbody in Tabelle - dynamische Größenanpassung
    Von hinkel11 im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 06-03-2009, 12:45
  4. dynamische tabelle abfragen
    Von timste im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 07-03-2006, 10:36
  5. dynamische Tabelle <--> onClick
    Von jj_ im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 05-08-2005, 15:16

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •