How to include rowspan and colspan dynamically inside <td> tag based on some conditions

Question

I know I can include <td colspan=10> statically when I want to merge the columns, but if I need to check some conditions and based on that only I need to merge then how this could be done?

My idea was like this:

var span="";
if(some condition)
span="colspan=10";

and then setting this variable inside <td> as:

<td +span+>

but it doesn't work like that… Any suggestion how to do this?

Answer 1

<table id="table" border=2>
<tr id="row1">
<td id="tableCellID">foo</td><td></td>
</tr>
<tr>
<td>foo</td><td>foo</td>
</tr>
</table>
<button onclick="button();" text="Change"/>
<script language="javascript">
var i = 0;
function button(){
var td = document.getElementById("tableCellID");

if(i==0){
td.setAttribute("colspan", 2);

i=1;
}else{
    td.setAttribute("colspan", 1);

    i=0;
}
}
</script>

This is how you can dynamically set the attribute colspan. You will see that changing the colspan of one cell will effect the layout of the entire table. You will need to deal with each cell in the row.