Link to home
Start Free TrialLog in
Avatar of limct
limct

asked on

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

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?
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

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.

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.
Avatar of sathishv
sathishv

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
LOL :-)

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



ASKER CERTIFIED SOLUTION
Avatar of PeterCN
PeterCN

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
Oooops... sorry! Happens when your cafeteria runs out of coffee!
:-)
hehe :)
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.