Spalte in Tabelle per JavaScript verkleinern

[Melanie]

Hallo ihr Lieben,

wir haben hier eine Webseite in der 3 Tabellen stehen. Sie heissen TABLE_2, TABLE_3 und TABLE_4! Vom Aufbau sind sie alle identisch.
Sie unterscheiden sich nur in den angezeigten Infos.

Eine Tabelle ist folgendermassen aufgebaut:

<table name="TABLE_2" border="0" cellpadding="0"
 cellspacing="1" width="400">
  <tbody>
    <tr>
      <td align="right" nowrap="nowrap">Country </td>
      <td nowrap="nowrap">Deutschland
      </td>
    </tr>
    <tr>
      <td align="right" nowrap="nowrap">City </td>
      <td nowrap="nowrap">Mustermann
      </td>
    </tr>
    <tr>
      <td align="right" nowrap="nowrap">Street Name
      </td>
      <td nowrap="nowrap">Hitnter dem Bahnhof 2 </td>
    </tr>
    <tr>
      <td align="right" nowrap="nowrap">External
Customer No. </td>
      <td nowrap="nowrap">xyz
      </td>
    </tr>
    <tr>
      <td align="right" nowrap="nowrap">Customer
Classification </td>
      <td nowrap="nowrap">Rich </td>
    </tr>
  </tbody>
</table>

Die Tabellen werden von einem System generiert und wir haben keinen Einfluss darauf - ausser JavaScript - sie im Aussehen zu verändern.
Alle 3 Tabellen sind gleich Gross und Breit. Ich möchte per JavaScript die erste Spalte in den Tabellen Fix setzen - z.B. auf die feste Breite 100 Pixel. Da wir das HTML nicht verändern dürfen - außer JavaScript reinschreiben (uns sind leider die Hände gebunden)- mus ich nun mit JavaScript arbeiten aber ich kenne diese Sprache nicht.

Im Internet habe ich folgendes Programm gefunden:

<script language="javascript">
inputs = document.getElementsByTagName("TABLE_1");
for (i=0; i<inputs.length; i++);
if (inputs[i].width > 200);
inputs[i].setAttribute("width","200");
</script>

Das funktioniert aber leider nicht. Was muss ich hier anpassen? Ich will doch nur die ersten Spalten Fix auf 100pix setzen :(

Viele Grüsse,
Melly

[EKKi]

Mahlzeit,

inputs = document.getElementsByTagName("TABLE_1");

inputs ist ein Array mit allen Elementen, die den Namen "TABLE_1" haben.

for (i=0; i<inputs.length; i++);
if (inputs[i].width > 200);

Wenn die Breite des i-ten Elements, das den Namen "TABLE_1" trägt, größer als 200 ist, dann ... passiert nix.

inputs[i].setAttribute("width","200");

Das i-te Element, das den Namen "TABLE_1" trägt, bekommt ein neues Attribut namens "width" mit dem Wert "200" verpasst.

Das funktioniert aber leider nicht. Was muss ich hier anpassen? Ich will doch nur die ersten Spalten Fix auf 100pix setzen :(

Was du tust, ist jedoch was ganz anderes. Vielleicht solltest du dir ein paar Javascript-Grundlagen http://de.selfhtml.org/javascript/sprache/index.htm@title=aneignen?

MfG,
EKKi

[Struppi]

Du hast was übersehen:

inputs = document.getElementsByTagName("TABLE_1");

^^^

Struppi.

[Melanie]

Hallo Ekki,

und wenn ich dann statt dessen folgendes probiere:

<script language="javascript">
document.getElementsByTagName("TABLE_2").setAttribute("width","200");
</script>

Das geht auch nicht. Wenn ich schon die Spaltenbreite nicht fix machen kann, dann würde ich gerne die Tabellenbreite ändern. Ich bekomme aber die Meldung das dise propertie nicht unterstützt wird??!??

Liebe Grüsse,
Melanie

[EKKi]

Mahlzeit,

document.getElementsByTagName("TABLE_2").setAttribute("width","200");

Das geht auch nicht. Wenn ich schon die Spaltenbreite nicht fix machen kann, dann würde ich gerne die Tabellenbreite ändern. Ich bekomme aber die Meldung das dise propertie nicht unterstützt wird??!??

Weil es - vermutlich - keine Elemente gibt, die <table_2> heißen. Was du meinst, ist die Methode "document.getElementsByName()". Die liefert dir allerdings ein Array zurück, das die Eigenschaft "width" nicht besitzt.

Eine einzelne Tabelle könntest Du dir aber mittels

document.getElementsByName("TABLE_2")[0];

holen oder du vergibst den Tabellen ne ID, dann kannst du mit

document.getElementById("TABLE_2");

direkt darauf zugreifen. Das mit den Javascript-Grundlagen war übrigens ernstgemeint.

MfG,
EKKi

[Tom]

Hello,

document.getElementsByTagName("TABLE_2").setAttribute("width","200");

Würde das nicht bedeuten, dass Du versuchst, dem Element <table_2> eine Breite von 200 zuzuweisen?
Wenn Ich das richtig verstanden habe, soll doch die erste Spalte eine Breite von 200 bekommen, also das erste <td>-Element, dass zu <table_2> gebört.

Melanie müsste also irgendwie z.B. Elemente in den Baum einfügen beim Element <table_2>

http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren

Vielleicht klappt das mit
http://de.selfhtml.org/javascript/objekte/node.htm#append_child ?

Diese Elemente können dann das Attribut width erhalten.

Harzliche Grüße vom Berg
http://bergpost.annerschbarrich.de

Tom

[Tom]

Hello,

nun bastel ich hier auch daran rum so aus neugier.
Aber JavaScript ist eben nicht mein Ding (bisher ...?)

Wie könnte ich denn in eine Tabelle den Bereich mit <Colgroup> am Anfang einbauen

<table name="table_1>

<--- ?

<tr>
     ...
  </tr>

</table>

Ich dachte, das würde so funktionieren

var newColgroup = document.createElement("Colgroup");
  var newCol      = document.createElement("Col");

newCol.setAttribute("width",200);
  newColgroup.appendChild(newCol);

newCol.setAttribute("width",100);
  newColgroup.appendChild(newCol);

newCol.setAttribute("width",300);
  newColgroup.appendChild(newCol);

newCol.setAttribute("width",150);
  newColgroup.appendChild(newCol);

document.getElementByName("table_1").appendChild(newColgroup);

Aber da bekomme ich immer nur "Das Element unterstützt diese Eigenschaft nicht..."

Harzliche Grüße vom Berg
http://bergpost.annerschbarrich.de

Tom

[plan_B]

Hallo,

newCol.setAttribute("width",150);
  newColgroup.appendChild(newCol);

document.getElementByName("table_1").appendChild(newColgroup);

Aber da bekomme ich immer nur "Das Element unterstützt diese Eigenschaft nicht..."

wahrscheinlich wolltest du

document.getElementsByName("table_1")[0].appendChild(newColgroup); nehmen,

auch solltest du für jede Spalte ein weiteres col-Element erzeugen

Gruß plan_B

[Tom]

Hello S.,

document.getElementByName("table_1").appendChild(newColgroup);

wahrscheinlich wolltest du

document.getElementsByName("table_1")[0].appendChild(newColgroup); nehmen,

Nun bekomme ich "... ist Null oder kein Objekt ..."

Muss ich wohl mal den Tipp aus einem andern Tread von Dir aufgreifen, und ein Alert einbauen...

Harzliche Grüße vom Berg
http://bergpost.annerschbarrich.de

Tom

[plan_B]

Hallo,

wahrscheinlich wolltest du

document.getElementsByName("table_1")[0].appendChild(newColgroup); nehmen,

Nun bekomme ich "... ist Null oder kein Objekt ..."

Muss ich wohl mal den Tipp aus einem andern Tread von Dir aufgreifen, und ein Alert einbauen...

auch bei mir wars mit _einem_ alert nicht getan, aber schliesslich hat's dann doch geklappt. Allerdings spreche ich die Tabelle jetzt mit der ID an.

hier meine Variante für einen 2-Spalter

  
  
tblcol("TABLE_2",[200,400]);  
  
function tblcol(tid,clist) {  
 var tbl=document.getElementById(tid);  
 if (!tbl)  
  alert("kein table mit id: "+tid)  
 else {  
  var cg=document.createElement("colgroup");  
  var tbl_w=0;  
  for (var c in clist) {  
   var col=document.createElement("col");  
   col.width=clist[c];  
   tbl_w += parseInt(col.width);  
   cg.appendChild(col);  
   }  
  tbl.width=tbl_w;  
  tbl.insertBefore(cg,tbl.firstChild);  
  }  
 }  
  

Gruß plan_B

[Tom]

Hello,

auch bei mir wars mit _einem_ alert nicht getan, aber schliesslich hat's dann doch geklappt. Allerdings spreche ich die Tabelle jetzt mit der ID an.

hier meine Variante für einen 2-Spalter

tblcol("TABLE_2",[200,400]);

function tblcol(tid,clist) {
var tbl=document.getElementById(tid);
if (!tbl)
  alert("kein table mit id: "+tid)
else {
  var cg=document.createElement("colgroup");
  var tbl_w=0;
  for (var c in clist) {
   var col=document.createElement("col");
   col.width=clist[c];
   tbl_w += parseInt(col.width);
   cg.appendChild(col);
   }
  tbl.width=tbl_w;
  tbl.insertBefore(cg,tbl.firstChild);
  }
}

  
Funktioniert ja tatsächlich prima!  
  
Nun will ich hier aber gleich noch alle Fragen dranhängen, die sich daraus ergeben. Vielleicht hat ja auch noch ein anderer JavaScript-Zauberer Lust dazu, sie zu beantworten?  
  
  
1\. Wie müsste man es umbauen, wenn es weder Name-Attribut noch ID-Attribut gäbe?  
   a. für alle gefundenen Tabellen im Dokument  
   b. für die erste gefundene Tabelle im Dokument  
   c. für eine bestimmte Tabellen im Dokument (In der Tabelle ist ein sibling mit 'xyz')  
  
2\. Darf man das <colgroup> Element überhaupt verwenden, wenn die Tabelle, wie in  
   Melanies Beispiel, ein <tbody> hat (aber kein <thead>)?  
   Was wäre, wenn sie ein <thead> hätte?  
  
3\. Wie könnte man automatsich die Anzahl der Spalten, also der <td>-Elemente im ersten <tr>  
   ermitteln? Wenn ein 'colspan' vorkommt, wird's ja noch verrückter!  
  
4\. Die wichtigste Frage wie immer zum Schluss:  
  
   Kennt jemand ein Werkzeug, mit dem man den resultierenden HTML-Code  
   aus vorhandenem statischen Dokument und dem dynamisch mit JavaScript erzeugten  
   anzeigen lassen kann?  
  
  
Speziell nach letzterem suche ich schon lange.  
Wahrscheinlich habe isch so ein Ding auf dem Rechner, und weiß es noch nicht einmal?  
\--> MS Visual Studio ??  
  
War nie meine Aufgabe, damit zu arbeiten...  
  
  
  
Harzliche Grüße vom Berg  
<http://bergpost.annerschbarrich.de>  
  
Tom

-- 
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen  
Nur selber lernen macht schlau  
Ein Jammer ist auch, dass die Dummen so selbstsicher und die Klugen voller Zweifel sind. Das sollte uns häufiger zweifeln lassen :-)  
  
![](http://bitworks.de/~selfHTML/Virencheck.gif)  

[plan_B]

Hallo,

wie ich es jetzt sehe, ist

  
 <table name="TABLE_2" ...>  

~~~ nicht valide. Deswegen ergibt  
  
~~~javascript
  
 var tbl2=document.getElementsByName("TABLE_2");  
 alert("tbl2.length "+ tbl2.length); // length 0  

~~~ ein leeres Array.  
  

> 1. Wie müsste man es umbauen, wenn es weder Name-Attribut noch ID-Attribut gäbe?  
  
man kommt nur über  
~~~javascript
  
 var tbls=document.getElementsByTagName("table");  
 var s="table-liste";  
 for (var i=0;i<tbls.length;i++) {  
   s+="\n"+i+"\t"+tbls[i].nodeName+"\t"+tbls[i].name;  
   }  
 alert(s);  
 var tbl=tbls[0]; // z.B.  

~~~ an eine Liste. Dann nach einem Textknoten mit einem "sibling mit 'xyz'" zu suchen, ist auch machbar.  
  

> 2. Darf man das <colgroup> Element überhaupt verwenden, wenn die Tabelle, wie in  
>    Melanies Beispiel, ein <tbody> hat (aber kein <thead>)?  
  
ich habe colgroup vor tbody und auch in tbody eingehängt und keinen Unterschied in der Darstellung gefunden. K.A., was nun valide ist. Können thead und tbody unterschiedliche Spaltenstruktur haben? Dann brauchten beide eine eigene colgroup.  
  

> 3. Wie könnte man automatsich die Anzahl der Spalten, also der <td>-Elemente im ersten <tr>  
>    ermitteln? Wenn ein 'colspan' vorkommt, wird's ja noch verrückter!  
  
im einfachen Fall:  
~~~javascript
  
 var tds=tbl.rows[0].getElementsByTagName("td");  
 alert("Spaltenzahl: "+tds.length);  

die colspan-Attribute der einzelnen Zellen zu beücksichtigen, scheint auch nicht kompliziert, aber falls noch CSS-Angaben ausgewertet werden müssen?

4. Die wichtigste Frage wie immer zum Schluss: resultierenden HTML-Code ...

da finde ich diese Beispiel verblüffend. Alle nowrap-Attribute verschwunden

  
  var tds=tbl.getElementsByTagName("td");  
  for (var i=0,td;td=tds[i];i++) {  
   td.noWrap=false;  
   }  
  alert(tbl.innerHTML);  
  

Gruß plan_B

[Antipitch]

Moin plan_B,

wie ich es jetzt sehe, ist

<table name="TABLE_2" ...>

>   
> ~~~javascript
  

>  var tbl2=document.getElementsByName("TABLE_2");  
>  alert("tbl2.length "+ tbl2.length); // length 0  
> 

~~~ ein leeres Array.  
  
Darüber hab ich mich beim Finden eines [etwas anderen Lösungsweges](https://forum.selfhtml.org/?t=160485&m=1043896) auch gewundert. Wenn du das alert hinter die Tabelle in den <body> schreibst, gehts allerdings. Hat vielleicht auch was mit dieser "Oh, entschuldigen Sie, aber diese Tabelle muss ich erstmal rendern"-Geschichte zu tun(?)...  
  
Auch festgestellt habe ich dabei, dass der FF für die vorliegenden Tabellen (in der vorliegenden Schreibweise) den Zeilenumbruch nach den <tr> als firstChild interpretiert und ich deshalb das hier  
  
if (rows[i].firstChild.nodeType == "3") {  
    rows[i].firstChild.nextSibling.setAttributeNode(newWidth);  
    rows[i].firstChild.nextSibling.removeAttribute("nowrap");  
    } else {  
    rows[i].firstChild.setAttributeNode(newWidth);  
    rows[i].firstChild.removeAttribute("nowrap");  
    }  
  
geschrieben habe. Unbefriedigend.  
  

> da finde ich diese Beispiel verblüffend. Alle nowrap-Attribute verschwunden  
> ~~~javascript
  

>   var tds=tbl.getElementsByTagName("td");  
>   for (var i=0,td;td=tds[i];i++) {  
>    td.noWrap=false;  
>    }  
>   alert(tbl.innerHTML);  
>   
> 

Wie du siehst, hatte ich das mit dem nowrap entfernen direkt gemacht, weil der FF bei dem Weg über Erzeugung eines width-Attributs für die <td>s selbige nicht schmaler macht, als der Textinhalt/Zeilenbreite es erfordert. Sieht bei Zeilenumbruch allerdings Kacke aus, wenn man den zweiten <td>s nicht auch gleichzeitig ein valign top gibt.

Steckt mehr in der Ausgangsfrage als man zunächst denkt, oder?

Gruß
Antipitch

[plan_B]

moin Antipitch

Darüber hab ich mich beim Finden eines etwas anderen Lösungsweges auch gewundert. ...

aber diese Tabelle muss ich erstmal "... rendern"-Geschichte zu tun(?)...

nee, ich prüfe auch erst in einer window.onload-Funktion. Unsere Beobachtungen unterscheiden sich wegen verschiedener Browser

var tbl2=document.getElementsByName("TABLE_2");
alert("tbl2.length "+ tbl2.length); // length 0

  
mit dem FF bekomme ich jetzt auch ein gefülltes Array, aber als Name erhalte ich trotzdem "undefined"  
  

> ...  
>     rows[i].firstChild.nextSibling.setAttributeNode(newWidth);  
> ...  
> geschrieben habe. Unbefriedigend.  
>   
  
... sicher ist es, die Eigenschaften der  
<http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#tr@title=HTML-Elementobjekte> zu nutzen  
  
~~~javascript
  
rows[i].cells[0].setAttributeNode(newWidth);  

wobei ich die setAttribute..()-Methoden auch zu umständlich finde ...

Steckt mehr in der Ausgangsfrage als man zunächst denkt, oder?

kommt eben drauf an, wie gross der Forscherdrang ist ....

Gruß plan_B

[plan_B]

Hallo,

document.getElementsByName("table_1")[0].appendChild(newColgroup); nehmen,

wieder nicht selbst ausprobiert ...

statt appendChild wäre insertBefore wahrscheinlich die richtige Methode

  
var tbl1=document.getElementsByName("table_1")[0];  
tbl1.insertBefore(newColgroup,tbl1.rows[0]);  

Gruß plan_B

[Antipitch]

Hi Melanie,

das sollte gehen:

<script type="text/javascript">

function breite() {
rows = document.getElementsByTagName("tr");
  for (var i=0; i<rows.length; i++) {
  var newWidth = document.createAttribute("width");
  newWidth.nodeValue = "100";
  if (rows[i].firstChild.nodeType == "3") {
    rows[i].firstChild.nextSibling.setAttributeNode(newWidth);
    rows[i].firstChild.nextSibling.removeAttribute("nowrap");
    } else {
    rows[i].firstChild.setAttributeNode(newWidth);
    rows[i].firstChild.removeAttribute("nowrap");
    }
  }
}
window.onload = breite;

</script>

Setzt alle ersten <td> auf 100 Breite und löscht das nowrap (falls der Text eigentlich mehr Breite brauchen würde, würde es sonst im FF glaube ich nicht gehen). Bißchen schnell gestrickt, macht das halt mit allen Tabellen im Dokument.

Gruß
Antipitch

[Gernot Back]

Hallo Melly,

wir haben hier eine Webseite in der 3 Tabellen stehen. Sie heissen TABLE_2, TABLE_3 und TABLE_4! Vom Aufbau sind sie alle identisch.
Sie unterscheiden sich nur in den angezeigten Infos.

Hast du denn wirklich keine Möglichkeit, auf die Tabelle mit CSS Einfluss zu nehmen, etwa mit:

  
td:first-child,  
th:first-child {  
   width:100px;  
}  

Im Zusammenhang mit

  
table {  
   table-layout:fixed;  
}  

betrifft das dann natürlich alle Tabellen in deinem Dokument in allen Browsern, die diesbezügliche CSS-Angaben verstehen.

http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child

Gruß Gernot