?
Solved

Aligning Table Cells to Top.

Posted on 2003-11-17
3
Medium Priority
?
599 Views
Last Modified: 2010-08-05
Working on script that will dynamically generate tables from an array, below I have provided a portion of it.
I've tried everything but can't seem to get the data in the cells to align to the top.  I've tried valign = top, style.valign = top in the TR, TD tags.  Even trying to put the data in the cell into a <span> tag with valigns into that.  Nothing seems to align it top.
Though strangly most will work fine to align it left/right or center.


<HTML>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<STYLE></STYLE>



<SCRIPT language="JavaScript">

var nh = Array(
{"key": "1234", "ticket1": "PM7654321", "status": "Open", "date": "Nov 14, 2003", "text": "Text Line 1", "alert": "0", "modified": "0"},
{"key": "1235", "ticket1": "PM7654322", "status":"Open", "date": "Nov 13, 2003", "text": "Text Line 2", "alert": "0", "modified": "0"},
{"key": "1236", "ticket1": "PM7654323", "status": "Open", "date": "Nov 15, 2003", "text": "Text Line 3", "alert": "1", "modified": "0"},
{"key": "1237", "ticket1": "PM7654324", "status": "Open", "date": "Nov 14, 2003", "text": "Text Line 4", "alert": "0", "modified": "0"}
);



function nhWrite(id)
{
var data_array = eval(id);
  var newTR, tdTICKET, tdSTATUS, tdOPENDATE, tdANALYST1, tdANALYST2, tdANALYST3, tdANALYST4;
  var inptTICKET1, inptTICKET2, inptTICKET3, inptTICKET4, newBR;
  var tdTEXT, tdACTIONTEAM, tdACTIONLOG;
  var newTR, newTD, newTD1, newTD2, newTD3, newINPUT;

  var newTable = document.createElement("table");  
  newTable.setAttribute("border", "1");

  var newTBody = document.createElement("tbody");
    newTBody.setAttribute("VALIGN", "TOP");
    newTBody.setAttribute("ALIGN", "LEFT");
    newTBody.style.valign = "TOP";

  for(var i = 0; i < data_array.length; i++)
  {
    newTR = document.createElement("tr");
    newTR.style.textalign = "TOP";

    if ( data_array[i].alert == "1") { newTR.style.backgroundColor = "#FFB6C1"; };
 
    tdTICKET = document.createElement("td");
    //tdTICKET.style.textalign = "TOP";
    //tdTICKET.setAttribute("VALIGN", "TOP");
    //tdTICKET.setAttribute("ALIGN", "LEFT");
    tdTICKET.setAttribute("width", "200");
    tdTICKET.setAttribute("height", "200");
    inptTICKET1 = document.createElement("input");
    inptTICKET1.setAttribute("type", "text");
    inptTICKET1.setAttribute("value", data_array[i]["ticket1"]);
    inptTICKET1.arrIdx = i;
        inptTICKET1.onchange = function(){ updateArray("nh", this.arrIdx, "ticket1", this.value) };
    tdTICKET.appendChild(inptTICKET1);
    newBR = document.createElement("br");


   
    tdSTATUS = document.createElement("td");
    tdSTATUS.setAttribute("VALIGN", "TOP");
    tdSTATUS.appendChild( document.createTextNode(data_array[i].status)  );
   
    tdOPENDATE = document.createElement("td");
    tdOPENDATE.appendChild( document.createTextNode(data_array[i].date)  );
   
    tdTEXT = document.createElement("td");
    newINPUT3 = document.createElement("textarea");
    newINPUT3.setAttribute("name", "textarea" + i);
    newINPUT3.appendChild ( document.createTextNode( data_array[i]["text"] + " - " + newINPUT3.name) );
    tdTEXT.appendChild(newINPUT3);

    newTR.appendChild(tdTICKET);
    newTR.appendChild(tdSTATUS);
    newTR.appendChild(tdOPENDATE);
    newTR.appendChild(tdTEXT);

    newTBody.appendChild(newTR);
  }
newTable.appendChild(newTBody);

var divlayer = document.getElementById(id);

divlayer.appendChild(newTable);

}

function updateArray (arrayName, arrayNumber, arrayHash, newValue)
{
    var array = eval(arrayName);
    array[arrayNumber][arrayHash] = newValue;
    array[arrayNumber]["modified"] = "1";
}

</SCRIPT>


</HEAD>
<BODY onLoad="nhWrite('nh');">

      <div ID='nh'>
      </div>

</BODY>
</HTML>


Thanks
-=[ Felix ]=-
0
Comment
Question by:Felix2000
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 3

Accepted Solution

by:
monvelasquez earned 200 total points
ID: 9768246
try this..


...
tdTICKET.style.verticalAlign = "TOP";
...
tdSTATUS.style.verticalAlign = "TOP";
...
tdOPENDATE.style.verticalAlign = "TOP";
...
tdTEXT.style.verticalAlign = "TOP";
...

0
 
LVL 3

Author Comment

by:Felix2000
ID: 9768278
Genius! Worked Perfectly... too bad the million references I checked made no mention of verticalalign...


Thanks
-=[ Felix ]=-
0
 
LVL 3

Expert Comment

by:monvelasquez
ID: 9768317
next time you may want to search for CSS atributes...
attributes that have a dash ( "-" ) in their names are
usually converted to javascript by removing the dash
and capitalizing the next letter.

ex. CSS attribute for VALIGN is vertical-align. and if you want to use it in javascript
you use style.verticalAlign...

works great most of the time..
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question