Solved

Setting the colspan attribute of a "th" cell dynamically

Posted on 2007-04-09
3
757 Views
Last Modified: 2012-08-13
Hi,

I am dynamically adding rows to an HTML table and one of them is a "th" row. I wanted to set the "colspan" attribute for this dynamically and am not able to do so - for some reason the code below does everything except increase the colspan of the row. My code is below. Please help.

      var tBody = document.getElementById("Agenda").getElementsByTagName("tBody")[0];
      var tRowH = document.createElement("tr");
      var tHead = document.createElement("th");
      tHead.setAttribute("colspan","2");
      tHead.setAttribute("bgcolor","#cccc99");
      tHead.setAttribute("align","center");
      tHead.innerHTML = "Topic 3";      
      tBody.appendChild(tRowH);
Thanks,
Aruna
0
Comment
Question by:arunatata
3 Comments
 
LVL 3

Expert Comment

by:mtorre615
ID: 18879598
try tHead.colSpan = 2.
0
 
LVL 15

Expert Comment

by:stanscott2
ID: 18879682
There's a quirk to this one.  Use appendChild to attach the TH to the TR tag first, and THEN set the colSpan attribute.
0
 
LVL 8

Accepted Solution

by:
jawahar_prasad earned 500 total points
ID: 18880913
Hi.. Aruna,
TRY THIS.. Some modifications to your code...

     var tBody = document.getElementById("Agenda").getElementsByTagName("tBody")[0];
      var tRowH = document.createElement("tr");
      var tHead = document.createElement("th");
      tHead.setAttribute("colSpan","2");
      tHead.setAttribute("bgColor","#cccc99");
      tHead.setAttribute("align","center");
      tHead.innerHTML = "Topic 3";      
      tBody.appendChild(tRowH);

EXPLANATION:
Colspan should be "colSpan" and not "colspan"    //CASE SENSITIVE
bgcolor should be "bgColor" and not "bgcolor"      //CASE SENSITIVE

0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now