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

Question

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

我想我可以通过调整行的宽度和高度来解决这个问题。我之所以要这样做，是因为我希望在包含数据的行和空白行之间保持一致。

我想我必须在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>

这也不起作用。

Answer 1

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

<td>&nbsp;</td>

Answer 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');