当前位置：首页 → 问答吧 → 如何动态设置table元素的属性？

如何动态设置table元素的属性？

时间：2010-08-13

来源：互联网

<html>
<body>
<div style="width: 560px; margin-top: 10px; text-align: left; overflow: hidden;">
<table id="my_table" border="1" class="main_table" style="width: 750px;">

</table>
</div>

<script type="text/javascript">

var rec_table=document.getElementById("my_table");

var ttbody=document.createElement("tbody");

var element=document.createElement("tr");
// element.style.color = "#FF0000";

//element.bgcolor = "red";
var colNum=4;
var colHeaders=new Array("111111","2222222","333333","444444");

for(var i=0;i<colNum;i++)
{
var tdelement=document.createElement("td");
tdelement.appendChild(document.createTextNode(colHeaders[i]));
element.appendChild(tdelement);
}

ttbody.appendChild(element);

rec_table.appendChild(ttbody);

</script>

</body>
</html>

我想在这里设置element的背景色，但是用element.bgcolor = "red";却不行。
还有要设置每个列的宽度以及对其方式怎么做？

作者: blandyzld 发布时间: 2010-08-13

应该是 element.style.backgroundColor="red" 吧
每列宽度直接设置td的 style="width:??" 不就行了么

建议你别这么做，把CSS写到JS里面，以后修改起来太麻烦。

还是用element.className给它制定一个 class 然后在CSS文件里写CSS样式吧

作者: WebAdvocate 发布时间: 2010-08-13

element.style.backgroundColor="red"这样是不行的，我找方法了：
element.style.cssText = "background-color:#D4E8FE;"; 这样就可以了。

作者: blandyzld 发布时间: 2010-08-13

引用 2 楼 blandyzld 的回复:

element.style.backgroundColor="red"这样是不行的，我找方法了：
element.style.cssText = "background-color:#D4E8FE;"; 这样就可以了。

最好不要在JS代码里面写CSS样式
后期维护你会很头疼

作者: WebAdvocate 发布时间: 2010-08-13

element.style.backgroundColor="#F00"

作者: wisword 发布时间: 2010-08-13