Benutzer:Pyromane/Tabellengenerator
< Benutzer:Pyromane
Zur Navigation springen
Zur Suche springen
Version vom 20. Oktober 2009, 11:45 Uhr von Pyromane (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „Mit diesem '''Ding''' kannst du '''Tabellen etwas bequemer''' erstellen. Oben stellst du Größe und Eigenschaften ein, du kannst auch dann noch Zeilen oder Spalt…“)
Mit diesem Ding kannst du Tabellen etwas bequemer erstellen. Oben stellst du Größe und Eigenschaften ein, du kannst auch dann noch Zeilen oder Spalten hinzufügen (oder den Rahmen rosa färben), wenn du in der Vorschautabelle schon Daten eingegeben hast.
function $(id){
return document.getElementById(id);
}
function createTh(id, inputVal)
{
var standard = '(Überschrift ' + id.replace('h', '') + ')';
var th = createElement('th', "th_"+id);
if (!(inputVal && inputVal != '')) {
inputVal = standard;
}
th.innerHTML = '<input type="text" value="' + inputVal + '" id="'+id+'" onfocus="clear_if_standard(this, \''+standard+'\');"/>';
return th;
}
function createTd(id, inputVal)
{
var td = createElement('td', "td_"+id);
var input = createElement('input', id);
if (inputVal && inputVal.length > 0) {
input.value = inputVal;
}
td.appendChild(input);
return td;
}
function createElement(type, id)
{
var el = document.createElement(type);
if (id && id.length != 0) {
el.id = id;
} else {
el.identify;
}
return el;
}
function pullDataFromTable()
{
var data = [];
var table = $('gen_table');
var trs = table.getElementsByTagName('tr');
//get all the rows
for (i=0; i< trs.length; i++) {
var tr = trs[i];
var tds = null;
if (i==0) {
tds = tr.getElementsByTagName('th');
} else {
tds = tr.getElementsByTagName('td');
}
var row = new Array();
//go through the tds
for (j=0; j < tds.length; j++) {
var td = tds[j];
if (i==0) {
row.push($("h"+(j+1)).value);
} else {
row.push($("r"+i+"c"+j).value);
}
}
data[i] = row;
}
return data;
}
function generateTable()
{
var data = pullDataFromTable();
var box = $('tableBox');
box.innerHTML = '';
var rows = $('rows').value;
var cols = $('cols').value;
var table = createElement('table');
table.id = 'gen_table';
//create tr
for (i=0; i < rows; i++) {
var tr = createElement('tr');
var td = '';
for(j=0; j < cols; j++) {
//create th-s if i = 1, otherwise td
if (i==0) {
if (data[i] && data[i][j]) {
td = createTh("h"+(j+1), data[i][j]);
} else {
td = createTh("h"+(j+1));
}
} else {
if (data[i] && data[i][j]) {
td = createTd("r"+i+"c"+j, data[i][j]);
} else {
td = createTd("r"+i+"c"+j);
}
}
tr.appendChild(td);
}
table.appendChild(tr);
}
box.appendChild(table);
setUpStyle();
}
/*
{| border="1"
|+ The table's caption
! Column heading 1 !! Column heading 2 !! Column heading 3
|-
! Row heading 1
| Cell 2 || Cell 3
|-
! Row heading A
|Cell B
|Cell C
|}
*/
function generateWikiTable()
{
var data = pullDataFromTable();
var rows = $('rows').value;
var cols = $('cols').value;
var style = getStyle();
var style_table = 'style="width:' + style.width + '; background-color:' + style.backgroundColor + '; border:' + style.border + ';"';
var style_cells = 'style="border:' + style.cellborder + '; padding:' + style.cellpadding + 'px;" | ';
if($('prettytable').checked){ // Wenn prettytable, dann nichts anderes
style_table = 'class="prettytable"';
style_cells = '';
}
var output = '{| ' + style_table + ' \n';
/*
if ($('caption').value.length != 0) {
output += "|+ "+$('caption').value+"\n";
} else {
//dont put output
}
*/
for (i=0; i< rows; i++) {
for (j=0; j<cols; j++) {
if (i==0) {
if (j == 0) {
output += "! " + style_cells + data[i][j];
} else {
output += " !! " + style_cells + data[i][j];
}
if (j==(cols-1)) {
output += "\n";
}
} else {
output += "| "+style_cells + data[i][j]+"\n";
}
}
output += "|-\n";
}
output += "|}";
$('generatedData').innerHTML = '<pre>'+output+'</pre>';
}
function clear_if_standard(input, value){
if(input.value == value) input.value = '';
}
function setUpStyle(){
if($('prettytable').checked){
var table = $('gen_table');
setStyle({'width': '', 'backgroundColor': '', 'border': '', 'cellborder': '', 'cellpadding': ''});
table.className = 'prettytable';
}
else setStyle(getStyle());
}
function getStyle(){
var style = new Object();
style.width = $('width').value;
style.backgroundColor = $('background_color').value.replace('(keine)', 'none');
style.border = $('border_size').value + 'px ' + $('border_type').value + ' ' + $('border_color').value.replace('(schwarz)', 'black');
style.cellborder = $('cellborder_size').value + 'px ' + $('cellborder_type').value + ' ' + $('cellborder_color').value.replace('(schwarz)', 'black');
style.cellpadding = $('cellpadding').value;
return style;
}
function setStyle(style){
var table = $('gen_table');
table.style.width = style.width;
table.style.backgroundColor = style.backgroundColor;
table.style.border = style.border;
var trs = table.getElementsByTagName('tr');
//get all the rows
for (i=0; i< trs.length; i++) {
var tr = trs[i];
var tds = null;
if (i==0) {
tds = tr.getElementsByTagName('th');
} else {
tds = tr.getElementsByTagName('td');
}
for (j=0; j < tds.length; j++) {
tds[j].style.border = style.cellborder;
tds[j].style.padding = style.cellpadding;
}
}
}
<table><tr><td>
<form name="setUpForm" action="javascript:generateTable()">
<fieldset>
<legend>Tabellengröße</legend>
<dl>
<dt>
<label for="rows">Zeilen</label>
</dt>
<dd>
<input type="text" value="3" name="rows" id="rows" /> (inkl. Überschriftenzeile)
</dd>
<dt>
<label for="cols">Spalten</label>
</dt>
<dd>
<input type="text" value="2" name="cols" id="cols" />
</dd>
<input type="submit" id="tableSizeButton" value="Größe anpassen">
</dl>
</fieldset>
</form>
</td><td>
<form name="setUpStyle" action="javascript:setUpStyle()">
<fieldset>
<legend>Tabelleneigenschaften</legend>
<dl>
<dt>
<label for="width">Breite</label>
</dt>
<dd>
<select name="width" id="width" onchange="this.style.width = this.value;">
<option value="auto">Automatisch</option>
<option value="100%">Volle Breite</option>
<option value="50%">Halbe Breite</option>
<option value="100px">Absolut: 100 Pixel</option>
<option value="200px">Absolut: 200 Pixel</option>
<option value="300px">Absolut: 300 Pixel</option>
<option value="500px">Absolut: 500 Pixel</option>
<option value="750px">Absolut: 750 Pixel</option>
</select>
</dd>
<dt>
<label for="background_color">Hintergrundfarbe</label>
</dt>
<dd>
<input type="text" size="6" name="background_color" id="background_color" value="(keine)" onfocus="clear_if_standard(this, '(keine)');" onchange="this.nextSibling.style.backgroundColor = this.value.replace('(keine)', 'none');"><span> </span> (HEX/RGB - <a href="http://www.colorpicker.com/" target="_blank">Hilfe</a>)
</dd>
<dt>
<label for="border_size">Außenrahmen</label>
</dt>
<dd style="border:0px solid black;">
Rahmenstärke: <input type="text" size="1" value="0" name="border_size" id="border_size" onchange="this.parentNode.style.borderWidth = this.value+'px';"/> Pixel (0 für keinen Rahmen)<br>
Rahmentyp: <select name="border_type" id="border_type" onchange="this.parentNode.style.borderStyle = this.value;">
<option value="solid">durchgezogen</option>
<option value="dashed">gestrichelt</option>
<option value="dotted">gepunktet</option>
<option value="double">doppelte Linie</option>
</select><br>
Rahmenfarbe: <input type="text" size="6" name="border_color" id="border_color" value="(schwarz)" onfocus="clear_if_standard(this, '(schwarz)');" onchange="this.parentNode.style.borderColor = this.value;"> (HEX/RGB - <a href="http://www.colorpicker.com/" target="_blank">Hilfe</a>)
</dd>
<dt>
<label for="cellborder_size">Innenrahmen</label>
</dt>
<dd style="border:0px solid black;">
Rahmenstärke: <input type="text" size="1" value="0" name="cellborder_size" id="cellborder_size" onchange="this.parentNode.style.borderWidth = this.value+'px';" /> Pixel (0 für keine Zwischenlinien)<br>
Rahmentyp: <select name="cellborder_type" id="cellborder_type" onchange="this.parentNode.style.borderStyle = this.value;">
<option value="solid">durchgezogen</option>
<option value="dashed">gestrichelt</option>
<option value="dotted">gepunktet</option>
</select><br>
Rahmenfarbe: <input type="text" size="6" name="cellborder_color" id="cellborder_color" value="(schwarz)" onfocus="clear_if_standard(this, '(schwarz)');" onchange="this.parentNode.style.borderColor = this.value;"> (HEX/RGB - <a href="http://www.colorpicker.com/" target="_blank">Hilfe</a>)
</dd>
<dt>
<label for="cellpadding">Abstand zw. Zellenrand und Inhalt</label>
</dt>
<dd style="border:1px dashed grey;">
<input type="text" size="2" value="0" name="cellpadding" id="cellpadding" onchange="this.parentNode.style.padding = this.value+'px';"> Pixel
</dd>
<dt>
<label for="cellpadding">Attribut "prettytable" setzen</label>
</dt>
<dd>
<input type="checkbox" name="prettytable" id="prettytable"><label for="prettytable"> Mit diesem Haken werden einige Standardformatierungen vorgenommen. Alle anderen Einstellungen werden dann nicht mehr umgesetzt.</label>
</dd>
<input type="submit" id="tableStyleButton" value="Eigenschaften anpassen">
</dl>
</fieldset>
</form>
</td></tr></table>
In der folgenden Tabelle kannst du die Eigenschaften testen sowie deine Inhalte in die Zellen eintragen.
<form name="generate" action="javascript:generateWikiTable()">
<div id="tableBox">
<table id="gen_table">
<tr>
<th><input type="text" name="h1" id="h1" value="(Überschrift 1)" onfocus="clear_if_standard(this, '(Überschrift 1)');"></th>
<th><input type="text" name="h2" id="h2" value="(Überschrift 2)" onfocus="clear_if_standard(this, '(Überschrift 2)');"></th>
</tr>
<tr>
<td><input type="text" id="r1c0" name="r1c0" value=""></td>
<td><input type="text" id="r1c1" name="r2c2" value=""></td>
</tr>
<tr>
<td><input type="text" id="r2c0" name="r2c0" value=""></td>
<td><input type="text" id="r2c1" name="r2c1" value=""></td>
</tr>
</table>
</div>
<input type="submit" id="generateWikiTable" value="Generieren!"/>
</form>
<div id="generatedData">
</div>
Dieser Generator basiert auf jenem von cloudsync.
