如何使用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;
}
------解决方案--------------------