?
Solved

Why and how to solve .setAttribute property that cannot set "rowspan" for the column of dynamic created table?

Posted on 2004-10-27
10
Medium Priority
?
8,231 Views
Last Modified: 2011-10-03
Hi, my code is:

          var newRow = document.getElementById("tblAddSubFields").insertRow();
              newCell = newRow.insertCell();
               newCell.innerHTML = "<font face=Verdana size=-1>" + n + "</font>";
          newCell.setAttribute("rowspan", "3");
              newCell = newRow.insertCell();
               newCell.innerHTML = "<font face=Verdana size=-1>" + sfnSubfieldsComboBox(vsCodesTablesFieldNames, n, "", "", "") + "</font>";
          newCell.setAttribute("rowspan", "3");
          newCell.setAttribute("align", "center");

It gives no run time error but how to solve it?
0
Comment
Question by:limct
  • 5
  • 2
  • 2
  • +1
10 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 12430787
You give no index for the row where the new row has to be inserted, so it is appended to the end of the table.
How do you expect to see the rowspan at end of the table?
Appending three rows should also not have any visible effects.

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12430826
And delete the question http:Q_21185661.html as long as nobody comments into that question.
Afterwards you have to ask Community Support to close the duplicate question.
0
 
LVL 6

Expert Comment

by:sathishv
ID: 12431092
You are setting the 'rowspan' property to the inserted cell rather than to the inserted row, the last two lines should be:

newRow.setAttribute("rowspan", "3");    //for the inserted row
newCell.setAttribute("align", "center");   //for the inserted cell
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 63

Expert Comment

by:Zvonko
ID: 12431649
LOL :-)

What is a row spaning row??? Isn't it then simply a row?



0
 
LVL 4

Accepted Solution

by:
PeterCN earned 2000 total points
ID: 12432153
It requires a capital S.; colSpan and rowSpan.
0
 
LVL 3

Expert Comment

by:ragerino
ID: 12432446
why don't you create the table via innerHTML

1. put a div somewhere where the table should be f.e.: <div id="tbldiv"></div>
2. create the html-code via javascript f.e.: var temp='<table id="bla"><tr><td rowspan=2>1,3</td><td>2</td></tr><tr><td>4</td></tr></table>';
3. place the innerHTML-code into the div: f.e.: document.getElementById('tbldiv').innerHTML=temp;
4. after that you can access the table via dhtml. maybe for IE you will need to call another function with a setTimeout('function2("bla")',10); because IE renders sometimes too slow, so the table isn't created immediately and you can't access it instantly via getElementById after setting the innerHTML propery of the div

hope that helps (and you r able to understand my english :)
i think this should be a little bit easier.
0
 
LVL 6

Expert Comment

by:sathishv
ID: 12432962
Oooops... sorry! Happens when your cafeteria runs out of coffee!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12432987
:-)
0
 
LVL 3

Expert Comment

by:ragerino
ID: 12433055
hehe :)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12433205
By the way. The best idea was from PeterCN:    rowSpan

Here my test:
<script>
function addRow(){
n = 100;
          var newRow = document.getElementById("tblAddSubFields").insertRow(1);
              newCell = newRow.insertCell();
               newCell.innerHTML = "<font face=Verdana size=-1>" + n + "</font>";
          newCell.setAttribute("rowSpan", "3");
              newCell = newRow.insertCell();
               newCell.innerHTML = "<font face=Verdana size=-1>" + 'sfnSubfieldsComboBox(vsCodesTablesFieldNames, n, "", "", "")' + "</font>";
          newCell.setAttribute("rowSpan", "3");
          newCell.setAttribute("align", "center");
}
</script>
<table id="tblAddSubFields" border="1">
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
</table>
<a href="javascript:addRow()">add</a>

Strange effects come when you add twice to same row those spans, but that's another story.


0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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

600 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