动态地向 HTML 表添加样式 - 使用 DOM、JS

adding style to a html table dynamically - using DOM, JS

本文关键字：使用 DOM JS 样式 添加 HTML 动态      更新时间：2023-09-26

你能看看下面的小提琴吗：..我正在为我的项目使用 JS

http://jsfiddle.net/dgqr2nLd/7/
我

有我想要的表格布局，带有填充、边框颜色等......

然而，在我的项目中，我似乎无法得到这个结果。我正在使用 DOM 元素在我的应用程序中动态创建一个 html 表，内部.html如下所示：

<ul>
    <li><a href="#tabs-1">Info</a></li>
    <li><a href="#tabs-2">Images</a></li>
</ul>
<div id="tabs-1">
    <center>
        <b><font color="FF6600"> Feature Properties </font></b>
    </center>
    <br>
    <table>
        <tbody>
            <tr>
                <td><b>id</b></td>
                <td>11079<br></td>
            </tr>
            <tr>
                <td><b>one</b></td>
                <td>d<br></td>
            </tr>
            <tr>
                <td><b>two</b></td>
                <td>d<br></td>
            </tr>
            <tr>
                <td><b>three</b></td>
                <td>d<br></td>
            </tr>
        </tbody>
    </table>
</div>
<div id="tabs-2">
    <a id="lb1" href="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" rel="lightbox[me]">
        <img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" width="200" height="200">
    </a>
</div>

所以 iv 厌倦了通过以下方式更新表格的表格外观：

var Newtable = document.createElement('table');
Newtable.rules = "all";
Newtable.cellpadding = "10px 10px 10px 10px";
NewTable.style = "border: 1px solid #CCCCCC";

这不起作用

试

    NewTable.class = "WorkFlowLayout"
 .WorkFlowLayout
    {
        rules=all;
         cellpadding=10px 10px 10px 10px;
          border: 1px solid #CCCCCC;
    }

这不起作用

-------------------------------------------------------------------------------------------------

我可以使用以下命令显示边框

Newtable.border = "1";

但无法获得规则或单元格填充工作...知道为什么吗？

------------------------------------------------------------------------------------------------

更新

IV 已使用 

'var Newtable = document.createElement('table');
 Newtable.setAttribute('border', '1');
 Newtable.setAttribute("cellPadding", "20px 20px 20px 20px");`

这将返回<table border="1" cellpadding="20px 20px 20px 20px"> <tbody><tr><td><b>id</b></td><td>13083<br></td></tr><tr><td><b>one</b></td><td>ujuj<br></td></tr><tr><td><b>two</b></td><td>uju<br></td></tr><tr><td><b>three</b></td><td>ujuj<br></td></tr></tbody></table>哪个单元格填充位于正确的位置，但它不会更改表格布局中的任何内容？ 有什么想法吗？>

另外当我使用：

     var Newtable = document.createElement('table');
        NewTable.setAttribute("className","WorkFlowLayout");
    .WorkFlowLayout
{
   /* rules:all;
     cellpadding:10px 10px 10px 10px; */
      border: 1px solid #CCCCCC;
}

这标记了 NewTable.setAttribute（"className"，"WorkFlowLayout"） 的错误; 说 newTable 不存在，因为 im 动态创建它并将其传回它不存在。 如何从这里添加样式谢谢？

当通过 JS 操作某些 DOM 元素的样式时，这可能是为该元素设置新类名的最简单方法。所以我会采用你的第二种方法。

它只有一个小错误——它是Element.className而不是Element.class。

使用以下内容时，第二个示例应按预期工作：

// This will overwrite any existing class names
NewTable.className = "WorkFlowLayout";
// This would add another class to an existing list of class names
NewTable.classList.add( "WorkFlowLayout" );
相关文章：