Adding CSS style in Table using javascript

Question

On http://www.elitedeafpoker.com/dev/poker-players.html - AJAX loads JSON data into a table and Im trying to add some classes to display background-color on only two tags seperately and center the texts, but it didnt work for me and I removed it. I need the table to look like this - http://www.elitedeafpoker.com/dev/img/table-example.jpg

Javascript

$(document).ready(function() {
    $.getJSON("js/dataPokerPlayers.json", function(data) {
        $.each(data, function(i, data){
            $(".tableData tbody").append("<tr><td>" + data.rank + "</td><td>" + data.name + "</td><td>" + data.earnings + "</td><td>" + data.points + "</td><td>" + data.totalearnings + "</td></tr>");
        });
    });
});

Hold on a second, you are developing a webpage for a pokerOnline but you don't know how to add a css selector to a <td> nor to text-align:center ??? — Milche Patern
– Milche Patern, Commented Apr 18, 2013 at 18:36
Yes, I said I tried to add "class="centertext" to center the texts, but it didnt work in javascript. Evan put class=\"center\" for me, that is fairly new to me to put two \s. in <td> By the way, its not an online game. — Christian
– Christian, Commented Apr 18, 2013 at 18:49

What have you tried · Accepted Answer · 2013-04-18 18:26:26Z

1

You can add in class="center" to the <td> elements that you want to be centered and then use a CSS selector to style those td's with the center class name.

jQuery:

$(document).ready(function() {
    $.getJSON("js/dataPokerPlayers.json", function(data) {
        $.each(data, function(i, data){
            $(".tableData tbody").append("<tr><td>" + data.rank + "</td><td>" + data.name + "</td><td class=\"center\">" + data.earnings + "</td><td class=\"center\">" + data.points + "</td><td>" + data.totalearnings + "</td></tr>");
        });
    });
});

CSS:

.center{
    text-align: center;
}

answered Apr 18, 2013 at 18:26

What have you tried

11.2k4 gold badges35 silver badges45 bronze badges

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

4 Comments

mchail Over a year ago

It looks like you're also trying to change the background color of alternating rows. You can do you with this css: .tableData tr:nth-child(even) { background-color: #000000; }

Christian Over a year ago

Thank you Evan! mchail that is what I need, but it didnt work for me.

Christian Over a year ago

and that will close the question? I still have one more to go to fix the alernating row background-color nth-child(even) that didnt work for me

What have you tried Over a year ago

@Christian That wasn't part of the original question. Honestly, you should close this one and open up another one with the background colors. However, look up "zebra table layout" and you'll find your answer :)

Collectives™ on Stack Overflow

Adding CSS style in Table using javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related