将css添加到html中表格的动态添加行答案

【问题标题】：Adding css to the dynamically added rows for a table in the html将css添加到html中表格的动态添加行
【发布时间】：2013-07-28 13:12:43
【问题描述】：

我编写了一个脚本，可以动态地为表添加行（有数据）。这对我来说很好。有时我遇到没有数据的行但我仍然想插入一个空白行。目前空白行的宽度和高度与有数据的行的宽度和高度不相同。

虽然我可以通过固定行的宽度和高度来解决这个问题。我想这样做是因为我希望在其中包含数据的行和空白行之间保持一致。

我认为我必须在 jquery 中使用 css 属性来进行这些操作。

我想知道如何为动态添加的行添加css？？

我编写了一个脚本，在 jquery 中创建一行并将其添加到表 status

 <script>
socket.on('stat', function (data) {
        var row = $("<tr><td>"+data+"</td></tr>");  
            $("#status").append(row);                   
    });
   </script>

现在要添加 css，我尝试了类似的方法。我创建了一个名为 newRow 的类。

<style type ="text/css">

.newRow{

        width: 200px;
        height: 200px;
   }
</style>


 <script>
    socket.on('stat', function (data) {
            var row = $("<tr><td>"+data+"</td></tr>");  
                $("#status").append(row);
                   $("#"+row).addClass('newRow');  // Is this right way of adding a class

        });

row.className = "newRow";  // Is this correct.

</script>

这似乎不起作用。

我也试过这样做。

 <script>
socket.on('stat', function (data) {
        var row = $("<tr><td>"+data+"</td></tr>");  
            $("#status").append(row).css("width" : 200px; "height: :200px);                 
    });
   </script>

这也行不通。

【问题讨论】：

没有得到您的答复？
@TimMac：我得到了答案。谢谢
你做到了？您没有将以下任何答案标记为已接受..

标签： javascript jquery css css-transitions html-table

【解决方案1】：

不确定为什么要添加空白行（您可以使用填充来达到相同的效果吗？）。但有时，对于某些浏览器，您需要为空元素添加一个空格，以使其接受宽度和高度声明。

<td>&nbsp;</td>

【讨论】：

【解决方案2】：

你的 CSS 有错误的语法，你不应该用你的 <tr><td> 创建一个 jQuery 对象，这只是一个模板。这应该有效：

    var row = "<tr><td>"+data+"</td></tr>"  
    $("#status").append(row).css({width : '200px', height: '200px'});  //CSS need to be an object for multiple values.

   //OR

    var row = "<tr><td>"+data+"</td></tr>"  
    $('#status tr').removeClass('newRow');
    $("#status").append(row).addClass('newRow');

【讨论】：