将CSS添加到HTML中表格的动态添加行中

Question

I have written a script that adds rows (having data) for a table dynamically. This is working fine for me. some times I come across rows that don't have data BUT I still want to insert a blank row. Currently the width and height of blank row is not same as that for the row having data.

I though I can solve this problem by fixing the width and height of the row. I want to do this because I want to have uniformity among the rows that have data in them and blank rows.

I think I have to use css property in the jquery for these manipulations.

I want to know how to add css for the rows that are dynamically added??

I have written a script that creates a row in jquery and adds it to the table status

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

Now to add css I tried something like this. I created a class called 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>

This doesn't seem to work.

I also tried doing this.

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

this also doesn't work.

Answer 1

You CSS has the wrong syntax and you should not create a jQuery object with your <tr><td> wich is only a template. This should work :

    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

Not sure why you want to add a blank row (could you use padding to achieve the same effect?). But sometimes, for some browsers, you need to add a space to an empty element to get it to take the width and height declarations.

<td>&nbsp;</td>