css is lost after inserting new rows

1
votes

While populating flexigrid using javascript method (which is in another .js file), unfortunately, the css is lost after I insert new rows. Other sections in the page are ok.

I use the following code:,

var newTbl = '<tr><td>' + id + '</td><td>' + name + '</td><td></tr>';   

$('#flexSwitch > tbody:last').append(newTbl);

And the html code I use:

<div id="switchGridDiv"  style="width: 100%">
  <table id="flexSwitch" class="flexigrid"> 
   <tbody>

   </tbody>
  </table>          
</div>

I can use .css() method of jquery but this will surely take too long when the size of flexigrid css is considered.

Any suggestions, why this might have occurred or any other way how to solve it?

Thanks in advance

2
jquerycssflexigrid
Works fine for me: jsfiddle.net/XNymc - Prisoner
You will need to post more of your jQuery and css. If you could replicate the issue in a jsfiddle.net as well that would be helpful. - tw16

2 Answers

0
votes

What happens if you remove the > and use ...

$('#flexSwitch tbody:last').append(newTbl);

?

Also ... remove the extra <td> at the end of ...

var newTbl = '<tr><td>' + id + '</td><td>' + name + '</td><td></tr>';
0
votes

Using flexAddData method of flexigrid solved the issues about css:

var data = "{page:1, total:3, rows:["+
                "{id:'id0',cell:['101','A']},"+
                "{id:'id1',cell:['102','B']},"+
                "{id:'id2',cell:['103','C']}"+
                    "]}";

$('#flexSwitch').flexAddData(eval('(' + data + ')'));

Thank you for all suggestions