如何根据某些条件在标记内动态包含rowspan和colspan

时间:2012-10-19 05:54:24

标签: javascript html-table

我知道当我想要合并列时,我可以静态地包含<td colspan=10>,但是如果我需要检查一些条件并且仅基于此我需要合并,那么如何做到这一点?

我的想法是这样的:

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

然后在<td>内将此变量设置为:

<td +span+>

但它不能那样工作......有什么建议怎么做?

3 个答案:

答案 0 :(得分:7)

<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>

这是动态设置属性colspan的方法。您将看到更改一个单元格的colspan将影响整个表格的布局。您将需要处理该行中的每个单元格。

答案 1 :(得分:4)

var span='';
var table='';

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


var table="<tr><td"+span+"></td></tr>":

答案 2 :(得分:3)

一种方法是,如果您能够在id

中设置td

<td id="foo">

在你的javascript中,你可以添加这样的属性,

document.getElementById("foo").colSpan="10";