cant able to apply css for table created using js

Question

below is the javascript table genertion for json response.here my problem is css for table row and data is not working but css for table header works.note:the css given below works well for other normal tables

var table = $('#mydemo1');
 	        
            for (var i = 0; i <= result.length; i++) 
            {
         	  
         	   var doc1 = result[i];
         	  
         	 var tr = $("<tr><td>").html(doc1.Name).data(doc1);
         	 tr.append($("</td></tr>"));
             
              
              table.append(tr);

            

            }

.mytdemo1 td
{
  font-family:Arial, sans-serif;
  font-size:14px;
  padding:10px 7px;
  border-style:solid;
  border-width:0px;
  overflow:hidden;
  word-break:normal;
  border-color:red;
  color:#444;
  background-color:#F7FDFA;
}
.mytdemo1 th
{
  font-family:Arial, sans-serif;
  font-size:14px;
  font-weight:normal;
  padding:10px 7px;
  border-style:solid;
  border-width:0px;
  overflow:hidden;
  word-break:normal;
  border-color:red;
  color:#fff;
  background-color:#26ADE4;
}
.mytdemo1 .mytdemo1-yw4l{vertical-align:top}

<table class="mytdemo1" id="mydemo1" style="display:none;border-collapse: collapse; border-color:red;" border="1" > 
	<tr><th>Employee Name</th></tr>
	</table>

I guess your problem lies here $("<tr><td>"), You can not create nodes this way. The string should contain a valid HTML markup. If you check your page source, you will see that the HTML will not be generated the way you want it to be and therefore your CSS properties are not applied properly. See THIS — abhishekkannojia
– abhishekkannojia, Commented Dec 30, 2015 at 7:00
I've tested your code with above said modification in JSBin and CSS is getting applied. jsbin.com/nojebuyixu/edit?html,css,js,output — abhishekkannojia
– abhishekkannojia, Commented Dec 30, 2015 at 7:02

abhishekkannojia · Accepted Answer · 2015-12-30 07:23:01Z

3

I guess your problem lies here $("<tr><td>").
You can not create nodes this way. The string should contain a valid HTML markup. See jQuery's documentation regarding this Here.

If you check your page source, you will see that the HTML will not be generated the way you want it to be and therefore your CSS properties are not applied properly.

I've modified your code a little bit and it is working. Note: This can be achieved in various others ways, one of which is following:

JSBin

 var doc1 = result[i];
 var td = $("<td>").html(doc1.Name).data(doc1);
 var tr = $("<tr>").html(td);

Instead of $("<tr><td>") I created individual nodes i.e. first <td> appended the html in it, then appended this <td> to the newly created tr.

edited Dec 30, 2015 at 7:23

answered Dec 30, 2015 at 7:13

abhishekkannojia

2,86625 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

david Over a year ago

abhishek !!i cant get what u modified there same code can u bold it here

Faraz Sh. · Accepted Answer · 2015-12-30 06:54:52Z

0

The way you have used jQuery append() function is wrong. append() function adds html inside a selector (at the ending position), but it seems that you have used it to create the td/tr closing tags tr.append($("</td></tr>"));.

I think you need to check text() function. jQuery Text Function Link

I hope this helps you.

answered Dec 30, 2015 at 6:54

Faraz Sh.

3772 silver badges8 bronze badges

Comments

Senjuti Mahapatra · Accepted Answer · 2015-12-30 06:57:06Z

0

Basically, your JS is incorrect. You need to append the <tr><td> to the table as well. I have modified the JS like this for your better understanding:

var table = $('#mydemo1'); 	        
for (var i = 0; i <= 3; i++) 
{ 
  var doc1 = 'Content';
  table.append("<tr><td>" + doc1 + "</td></tr>");            
}

.mytdemo1 td
{
  font-family:Arial, sans-serif;
  font-size:14px;
  padding:10px 7px;
  border-style:solid;
  border-width:0px;
  overflow:hidden;
  word-break:normal;
  border-color:red;
  color:#444;
  background-color:#F7FDFA;
}
.mytdemo1 th
{
  font-family:Arial, sans-serif;
  font-size:14px;
  font-weight:normal;
  padding:10px 7px;
  border-style:solid;
  border-width:0px;
  overflow:hidden;
  word-break:normal;
  border-color:red;
  color:#fff;
  background-color:#26ADE4;
}
.mytdemo1 .mytdemo1-yw4l{vertical-align:top}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytdemo1" id="mydemo1" style="border-collapse: collapse; border-color:red;" border="1" > 
	<tr><th>Employee Name</th></tr>
	</table>

answered Dec 30, 2015 at 6:57

Senjuti Mahapatra

2,6004 gold badges30 silver badges41 bronze badges

3 Comments

david Over a year ago

i need to store information as part of data(doc1) see above question how to add that to this implementation

Senjuti Mahapatra Over a year ago

Can you please provide the structure of the data that will be coming as a response. What will be doc1 more precisely.

david Over a year ago

Alorika pls check here stackoverflow.com/questions/34309482/table-for-json-response

Collectives™ on Stack Overflow

cant able to apply css for table created using js

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related