日期:2014-05-18  浏览次数:21171 次

如何使用JS动态改变表格的TD属性?
我原来的表格属性如下(PHP代码):
PHP code

echo    '<td bgcolor="#e6f3ff">';


现在想动态改变表格的属性,比如将 
HTML code

style="padding-right: 0px; padding-left: 4px; font-weight: bolder; font-size: 13pt; padding-
bottom: 0px; color: #0000aa; line-height: 30px; padding-top: 2px; font-family: 宋体" width="95%" background="1.gif"


插入TD中,即变成 
PHP code

echo    '<td style="padding-right: 0px; padding-left: 4px; font-weight: bolder; font-size: 13pt; padding-
bottom: 0px; color: #0000aa; line-height: 30px; padding-top: 2px; font-family: 宋体" width="95%" background="1.gif" 
bgcolor="#e6f3ff">';



当然,上述代码可随用户选择而不同。 
就像有的网站文章,允许用户选择字体的“大、中、小”一样,请问我的代码应该怎么写,越详细越好,谢谢!

补充一下,上述的“HTML code”里的内容我已经做了好几个,比如说Style1、Style2、Style3、Style4,网页界面上有按钮分别对应,点击按钮则自动将TD的风格转换为指定的风格。 
用JS代码如何实现。

------解决方案--------------------
先获得 td的对象,用id或者dom方式获得你自己看情况决定。然后把你这sytle中的东西最好放到css中,用一个class代替,然后用js修改td的Class属性就可以了。比如:
var tdObj = document.getElementById("myTd");
tdObj.Class = "abc";
abc就是你的那些style中的东西,类似以下,具体属性名称就不确保ok了。
.abc
{
padding-right: 0px; 
padding-left: 4px; 
font-weight: bolder; 
font-size: 13pt; 
padding-bottom: 0px; 
color: #0000aa; 
line-height: 30px; 
padding-top: 2px; 
font-family: 宋体" 
width="95%" 
background="1.gif" 
background-color="#e6f3ff
}
------解决方案--------------------
function changeStyle(style)
{
var currentTD = document.getElementById("yourTdId");
currentTD.class=style;
}
------解决方案--------------------
探讨
function changeStyle(style)
{
var currentTD = document.getElementById("yourTdId");
currentTD.class=style;
}