www.webdeveloper.com
Results 1 to 7 of 7

Thread: Column width not working on dyanamic table

  1. #1
    Join Date
    Mar 2012
    Location
    Charlotte, NC
    Posts
    6

    Column width not working on dyanamic table

    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="";              
    }

  2. #2
    Join Date
    Feb 2010
    Location
    Amsterdam
    Posts
    174
    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>

  3. #3
    Join Date
    Mar 2012
    Location
    Charlotte, NC
    Posts
    6
    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

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    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...

  5. #5
    Join Date
    Mar 2012
    Location
    Charlotte, NC
    Posts
    6
    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
    Last edited by deeciple; 03-15-2012 at 01:49 PM.

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    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...
    Last edited by 007Julien; 03-15-2012 at 02:29 PM.

  7. #7
    Join Date
    Mar 2012
    Location
    Charlotte, NC
    Posts
    6
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles