Column width not working on dyanamic table

**deeciple** · 03-15-2012, 08:59 AM

Hi All,

I have been working on a script that takes the user input to a number of text fields and populates a table dynamically from that input. Everything is working great and all I want to do now is set the column widths of the table columns to something more in keeping with the character lengths that are being entered. I have tried a number of things but my table always has the same evenly sized columns. I have tried:

node.width=()
node.style.width=()
node.setAttribute()

I can't seem to figure out which element the statement should act upon or exactly how to write the statement. Thanks in advance for any help.

Kind regards,
Ken

Code:

function addRow(tableID) {
    if (!document.getElementById(tableID)) {

        var body = document.getElementsByTagName("fieldset")[2];
        var tbl = document.createElement("table");
        var tblBody = document.createElement("tbody");
 
        tbl.appendChild(tblBody);
        body.appendChild(tbl);
        tbl.setAttribute("id", "dataTable");
        tbl.setAttribute("border", "0");
        }

    var StartTime = document.getElementById('StartTime');
    var EndTime = document.getElementById('EndTime');
    var MaterialID = document.getElementById('MaterialID');
    var Title = document.getElementById('Title');               
    
    var table = document.getElementById(tableID);               
    
    var rowCount = table.rows.length;             
    var row = table.insertRow(rowCount);
 
    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";             
    cell1.appendChild(element1);               
    
    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");             
    element2.type = "text";
    element2.setAttribute("name","StartTime[]");
    element2.setAttribute("readonly","true");
    element2.value = StartTime.value;             
    cell2.appendChild(element2);
    StartTime.value="";              
    
    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");             
    element3.type = "text";
    element3.setAttribute("name","EndTime[]");
    element3.setAttribute("readonly","true");
    element3.value = EndTime.value;             
    cell3.appendChild(element3);
    EndTime.value=""; 

    var cell4 = row.insertCell(3); 
    var element4 = document.createElement("input");             
    element4.type = "text";
    element4.setAttribute("name","MaterialID[]");
    element4.setAttribute("readonly","true");
    element4.value = MaterialID.value;            
    cell4.appendChild(element4);
    MaterialID.value="";               
    
    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");             
    element5.type = "text";
    element5.setAttribute("name","Title[]");
    element5.setAttribute("readonly","true");
    element5.value = Title.value; 
    cell5.appendChild(element5);
    Title.value="";              
}

**Gozzy82** · 03-15-2012, 11:00 AM

hey you can just use setAttribute('width', IntegerValue);

i made a example for fun

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
<script type="text/javascript">
function Addrow()
{
// clear table before we begin
Clear();

 var tr = document.createElement('tr');
 var td = document.createElement('td');
 
 td.style.border = 'solid 1px black'; // give td a border so u see it visibly
 
 var td2 = td.cloneNode(true); // clone the node and copy properties

 td.setAttribute('width', Math.round(Math.random()*150));  // pick a random nr between 0 and 150
 td2.setAttribute('width', Math.round(Math.random()*150));  // pick a random nr between 0 and 150
 
 td.innerHTML = 'width is ' + td.getAttribute('width');
 td2.innerHTML =  'width is ' + td2.getAttribute('width');

 tr.appendChild(td);

 tr.appendChild(td2);
 var tbody = document.getElementById('testTbody');
 tbody.appendChild(tr);
}
function Clear()
{
 var tbody = document.getElementById('testTbody');
 while(tbody.firstChild)tbody.removeChild(tbody.firstChild);
}
</script>

  </head>
  <body>
    <p onclick="Addrow()">Click here to test</p>
<table style="border:solid 1px black">
<tbody id="testTbody">
</tbody>
</table>
  </body>
</html>

**deeciple** · 03-15-2012, 12:07 PM

Hi Gozzy82,

Thanks for your reply and for the example you provided. I had tried that solution but for some reason it is not working for me. I think I am using the method incorrectly or on the wrong element. Here is what I tried

Code:

    var cell2 = row.insertCell(1);
    cell2.setAttribute('width','100');

When that did not work I tried the following:

Code:

    var cell2 = row.createElement(td);
    cell2.setAttribute('width','100');

But still no luck. What could I be doing wrong here?

Kind regards,
Ken

**007Julien** · 03-15-2012, 12:26 PM

setAttribute does not work (or require a particular syntax) with IE when used with the style attribute. Define different CSS class and use the className property to change the class of the td elements...

**deeciple** · 03-15-2012, 01:23 PM

Thank you 007Julien. Please forgive me. I am very new to web developement. Could you provide an example? I am thinking that I will have to create a separate class for each cell having a different width, correct? I created 2 classes with my widths set appropriately (.LongField and .ShortField) and tried to use them as you recommended but it is still not working:

Code:

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");             
    element4.type = "text";
    element4.setAttribute("name","MaterialID[]")
    element4.setAttribute("readonly","true");
//Here is what I tried:
    element4.setAttribute("class",".ShortField");
    element4.value = MaterialID.value;            
    cell4.appendChild(element4);
    MaterialID.value="";               
    
    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");             
    element5.type = "text";
    element5.setAttribute("name","Title[]");
    element5.setAttribute("readonly","true");
//Here is what I tried:
    element5.setAttribute("class",".LongField");
    element5.value = Title.value; 
    cell5.appendChild(element5);
    Title.value="";

Thank you,

Ken

**007Julien** · 03-15-2012, 02:11 PM

Do not use setAttribute ! which, even with the class, requires the argument class for Firefox or className for Internet Explorer !

Use the className property of HTML elements (See for example W3cSchools.com) like this :

Code:

var cell2 = row.createElement(td);
    cell2.className="ShortField"; // or "LongField" whithout point here to indicate, and not to define with CSS, the class.

Effectively you have to create several classes. It is the prise to be paid not to have to use various codes...

**deeciple** · 03-15-2012, 02:59 PM

007Julien,

Thanks for your help. I was able to get it to work by using your advice. I did need to apply the class to my var "element" (rather than var "cell#") as follows:

Code:

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.className="ShortField";             
    element4.type = "text";
    element4.setAttribute("name","MaterialID[]")
	  element4.setAttribute("readonly","true");
    element4.value = MaterialID.value;            
    cell4.appendChild(element4);
    MaterialID.value="";               
    
    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");
    element5.className="LongField";             
    element5.type = "text";
    element5.setAttribute("name","Title[]");
	  element5.setAttribute("readonly","true");
    element5.value = Title.value; 
    cell5.appendChild(element5);
    Title.value="";

Thanks again,

Ken

Thread: Column width not working on dyanamic table

Thread Tools

Display

Column width not working on dyanamic table

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions