PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Tabelle per js dynamisch erweitern


FlorianL
23-08-2007, 07:10
hallo, ich möchte per knopfdruck neue spalten zur tabelle hinzufügen lassen, leider funktioniert der js code nicht den ich mir er-googled hab ;)

jemand ne idee worans liegen könnte?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Besprechungsbericht</title>
<link rel="stylesheet" href="file:///R|/styles/oe322.css">
</head>
<body>

<script type="text/javascript">
function numRows(table_id) {
if (!document.getElementById || !document.getElementsByTagName) {
return;
}
var rows = document.getElementById(table_id).getElementsByTag Name('tr');
var numRows = 0;
for (i = 0; i < rows.length; i++) {
numRows=numRows+1;
}
return numRows;
}
function addRow(table_id,row_name_id) {
if (!document.getElementById || !document.createElement || !document.createTextNode) {
alert ("Ihr Browser unterstützt die Funktion leider nicht");
return;
}
var table = document.getElementById(table_id);
var lastRow = numRows(table_id);
var rowNum = lastRow+1;
if (navigator.platform == "MacPPC") {
lastRow = lastRow*2;
}
var row = table.insertRow(lastRow);
var cell_1 = row.insertCell(0);
var textNode = document.createTextNode("Untermenu #" + rowNum);
cell_1.appendChild(textNode);
var cell_2 = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'row_name_id' + rowNum);
el.setAttribute('id', 'row_name_id' + rowNum);
el.setAttribute('size', '60');
cell_2.appendChild(el);
}
function remRow(table_id) {
if (!document.getElementById) {
alert ("Ihr Browser unterstützt die Funktion leider nicht");
return;
}
var table = document.getElementById(table_id);
var lastRow = numRows(table_id);
if (lastRow > 1) {
table.deleteRow(lastRow-1);
} else {
alert("Es muss minedestens ein Untermenüpunkt bestehen bleiben");
}
}
</script>

<?php
error_reporting(E_ALL);
$timestamp = time();
$datum = date("d.m.Y",$timestamp);
$uhrzeit = date("H:i",$timestamp);
?>

<h1>Besprechungsbericht</h1>

<form action="post.php" method="post">
Schriftfuehrer:
<select name="Author">
<option selected="selected">Bitte wählen</option>
<option value="2">H.Billion</option>
<option value="3">T.Koch</option>
<option value="4">J.Ketabchy</option>
<option value="5">I.Praum</option>
<option value="6">M.Schroeder</option>
<option value="7">F.Luettgens</option>
</select>
<br><br>
<strong>Datum:</strong> <?php echo $datum ?>
<input name="startzeit" type="text" size="5" maxlength="5" value="<?php echo $uhrzeit; ?>"> Uhr bis

<input name="endzeit" type="text" size="5" maxlength="5" value="14:30"> Uhr.

<br><br><strong>Teilnehmer:</strong><br>
<input type="checkbox" name="teilnehmer" value="H.Billion"> H.Billion <?php echo "\t" ?>
<input type="checkbox" name="teilnehmer" value="T.Koch"> T.Koch <?php echo "\t" ?>
<input type="checkbox" name="teilnehmer" value="J.Ketabchy"> J.Ketabchy <?php echo "\t" ?>
<input type="checkbox" name="teilnehmer" value="I.Praum"> I.Praum <?php echo "\t" ?>
<input type="checkbox" name="teilnehmer" value="H.Schroeder"> H.Schroeder <?php echo "\t" ?>
<input type="checkbox" name="teilnehmer" value="U.Bergefeld"> U.Bergefeld <?php echo "\t" ?>
<input type="checkbox" name="teilnehmer" value="F.Luettgens"> F.Luettgens <?php echo "\t" ?>

<br><br>
<table width="900" height="283" border="1" align="left" id="table_id">
<tr>
<td><strong>Thema</strong></td>
<td><strong>Aktion</strong></td>
<td><strong>Bearbeitung</strong></td>
<td><strong>Termin</strong></td>
</tr>
<tr>
<td>Früh/Spätdienst kommende Woche</td>
<td>A</td>
<td>Alle</td>
<td>Heute</td>
</tr>
<tr>
<td><textarea name="thema1_thema" cols="90" rows="2"></textarea></td>
<td><select name="thema1_aktion" size="1"><option>A</option><option>I</option></select></td>
<td><input name="thema1_bearbeitung" type="text" size="12" maxlength="30"></td>
<td><input name="thema1_termin" type="text" size="12" maxlength="30"></td>
</tr>
<tr>

<tr>
<td>
<input type=button value="+" onClick="addRow">
<input type=button value="-" onClick="remRow">
<input type="submit" value="Absenden" />
<input type="reset" value="Reset" />
</td>
</tr>
</table>

<br><br><br><br><br><br>
</form>
</body>
</html>
RoWo
23-08-2007, 21:24
erscheint der JS code im Browser???

Probier es mal mit



<script type="text/javascript">
<!--
function numRows(table_id) {
...
}
//-->
</script>
FlorianL
24-08-2007, 08:50
habs gestern noch hinbekommen, allerdings hab ich nun ein kleines problem mit einer dropdown box (<select>)



var cell_2 = row.insertCell(1);
var el = document.createElement('select');
el.setAttribute('lenght', '2');
el.setAttribute('name', 'thema_aktion' + rowNum);
el.setAttribute('id', 'row_name_id' + rowNum);
el.setAttribute('size', '1');
var opt = document.createElement('option');
opt.setAttribute('option', 'I');
cell_2.appendChild(el);
cell_2.appendChild(opt);


leider ist die box nun leer da die options nicht richtig angehangen werden, hab schon mehrere dinge durchprobiert aber nix hat geholfen... :/
BlueJay
24-08-2007, 11:13
el.setAttribute('lenght', '2');


leider ist die box nun leer da die options nicht richtig angehangen werden,
Dreckfehler? (length)
Sagt die Javascript-Konsole im Firefox was dazu? (Ach nee, die schweigt sich bei fehlenden Attributen meist aus)

so long,
BlueJay