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

您的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');

Answer 2

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

<td>&nbsp;</td>

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

2 个答案: