Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Programmatically sizing table cells

    Hello,

    I'm trying to write a function that will do a few things. First, loop through the rows in any table on the page (skipping the first table) and change the class of alternating rows (skipping rows inside <thead>). Then, look at the length of the innerText of each cell in a column, and size the column based on the largest innerText. I've got it somewhat working, but I'm having some issues finishing it off. Here's the js:

    Code:
    function loaded()
    {
    	// Set alternating table row class names
    	var tables = document.getElementsByTagName("table");
    	for (t = 1; t < tables.length; t++)
    	{
    		tName = tables[t].id;
    		var rows = document.getElementById(tName).getElementsByTagName("tr");
    		var ths = document.getElementById(tName).getElementsByTagName("thead")[0].getElementsByTagName("tr");
    			for (i = ths.length; i < rows.length; i++)
    			{
    				// var tbods = document.getElementById(tName).getElementsByTagName("tbody")[0].getElementsByTagName("tr");
    				td = rows[i].getElementsByTagName("td");
    // I think the next line is my problem, but I'm not sure what it should be
    				for (n = 0; n < td.length; n++)
    					{
    						var maxVal = Math.max(td[n].innerText.length);
    						if (maxVal < 7)
    						{
    							if(i % 2 == 0)
    							{
    								rows[i].className = 'swWiringEven';					
    
    								for (k = 0; k < td.length; k++)
    								{
    										td[k].className = "swWiringSmTD";
    										console.log(maxVal);
    								}
    							}
    							else
    							{
    								rows[i].className = 'swWiringOdd';
    
    								for (k = 0; k < td.length; k++)
    								{
    			/*						var tdList = Array.prototype.slice.call(td);
    									var maxVal = Math.max(tdList[k].innerText.length);*/
    
    										td[k].className = "";
    								}				
    							}
    						}
    						else
    						{
    							{
    							if(i % 2 == 0)
    							{
    								rows[i].className = 'swWiringEven';					
    							}
    							else
    							{
    								rows[i].className = 'swWiringOdd';				
    							}
    						}
    						}
    
    					}
    			
    
    			}
    	}
    // End alternating table rows
    }
    It's looping through the rows and setting the class of the rows. The difficulty I'm having is figuring out the organization of the function to have it loop through the cells in a column rather than the cells in a row.

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,405
    Thanks
    13
    Thanked 355 Times in 351 Posts
    note that innerText is a proprietary property and not guaranteed to work (AFAIK only IE and maybe Chrome support it)
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It looks like I should be using childNodes[] instead then. That said, I am using Chrome and have console.log(maxVal) in my code, and I can see it outputting.

    Any ideas about the logic I should be using? I think that is my real problem. I considered getting the length of the first row's td[], and setting that to a variable, then incrimenting it after each row loop. My guess is that's an inefficient way to do it though?

  • #4
    New Coder
    Join Date
    Oct 2010
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This isn't exactly what I wanted, but it's pretty close:

    Code:
    function loaded()
    {
    	var tables = document.getElementsByTagName("table");
    	for (t = 1; t < tables.length; t++)
    	{
    		tName = tables[t].id;
    		// var rows = document.getElementById(tName).getElementsByTagName("tr");
    		var ths = document.getElementById(tName).getElementsByTagName("thead")[0];
    		var tbods = document.getElementById(tName).getElementsByTagName("tbody")[0];
    		var tbds = tbods.getElementsByTagName("tr")[0].getElementsByTagName("td");
    		var rows = tbods.getElementsByTagName("tr");
    
    		for (i = 0; i < rows.length; i++)
    		{
    			if (i % 2 == 0)
    			{
    				rows[i].className = 'swWiringEven';
    				td = rows[i].getElementsByTagName("td");
    				for (n = 0; n < td.length; n++)
    				{
    					if (td[n].childNodes[0].length < 10)
    					{
    						td[n].className = 'swWiringSmTD';
    					}
    					else
    					{
    						td[n].className = 'swWiringLnTD';
    					}
    				}
    			}
    			else
    			{
    				rows[i].className = 'swWiringOdd';
    				td = rows[i].getElementsByTagName("td");
    				for (n = 0; n < td.length; n++)
    				{
    					if (td[n].childNodes[0].length < 10)
    					{
    						td[n].className = 'swWiringSmTD';
    					}
    					else
    					{
    						td[n].className = 'swWiringLnTD';
    					}
    				}
    			}
    		}
    	}
    }


  •  

    Posting Permissions

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