日期:2014-05-17  浏览次数:20712 次

如何动态设置table元素的属性?
<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";却不行。
还有要设置每个列的宽度以及对其方式怎么做?


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


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

还是用element.className给它制定一个 class 然后在CSS文件里写CSS样式吧
------解决方案--------------------
探讨

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