Reputation: 499

Bgcolor for alternative rows in a table dynamically using jQuery

I created the program to add the row to a table using Add Row button. Each row is added to a table as a new row. I want to add different background color for odd and even rows. I am using the jQuery to add background but there is a little wrong in my code. I means that I can add the background color in rows but it displays not correctly.

Here is jQuery code:

<script>
    $(document).ready(function() {
        var id = 0;

        // Add button functionality
        $("#addrow").click(function() {
            id++;

            if(id%2==0){
                $(".prototype td").css("background-color","#eee");
            }else{
                $(".prototype td").css("background-color","#ddd");
            }

            var master = $(this).parents("table.stdform");

            // Get a new row based on the prototype row
            var prot = master.find(".prototype").clone();

            master.find(".fancyTable tbody").append(prot);

        });
    });
</script>

Here is html code:

<html>
<head>
    <title></title>
</head>
<body>
    <table width="100%" cellpadding="0" cellspacing="0" border="0"
    class="stdform">
        ..other codes...
        <tr><td>
        <table class="fancyTable" id="sortable-table"
                cellpadding="0" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <td>header one</td>
                        <td>header two</td>
                        <td>header three</td>
                    </tr>
                </thead>
                <tbody id="job-tbody">
                    <tr class="prototype">
                        <td>one</td>
                        <td>two</td>
                        <td>three</td>
                    </tr>
                </tody>
        </table>
        </td></tr>
    </table>
</body>
</html>

Thanks,..

Upvotes: 1

Answers (2)

sksallaj

Reputation: 4010

You can do this with a css style sheet, or you can do this with jquery:

http://api.jquery.com/odd-selector/

Taken code from jquery site:

<table border="1">
  <tr><td>Row with Index #0</td></tr>
  <tr><td>Row with Index #1</td></tr>
  <tr><td>Row with Index #2</td></tr>
  <tr><td>Row with Index #3</td></tr>
</table>

<script>
    $( "tr:odd" ).css( "background-color", "#bbbbff" );
</script>

Notice how the html is untouched of any css styling, and how jquery does the work in one line. If you want to access even colors, there is always the "tr:even" selector.

http://api.jquery.com/even-selector/

One additional problem (this is only if you don't use postback to refresh your table and want to refresh it live)

There is one more problem you might experience when you add a new row. Your jquery.ready function gets executed one time.. after your page is ready; so since you'd typically have that jquery code $( "tr:odd" ){...} on a dom ready to handle the html table elements that you already have, the css styling will only affect those rows, and not any new rows that you'd add after that.

You can either take the short cut, and add the same code used for the jquery.ready function and apply it to your click handler (which might take a performance hit if your users has a lot to add and your table is huge), or you can track the last row of your table, figure out of it is odd or even, and apply the css styling that way as you add in the new row.

I'd keep a running count of how many items are in your table, and use that number as a determining factor for the new row you'll add.

Upvotes: 2

Manoj

Reputation: 1890

You can use Jquery Odd and even selecter ,

Try this code:

DEMO

  $(document).ready(function() {
            $("tr:odd").css("background-color","#eee");
            $("tr:even").css("background-color","#ddd");
        });

Upvotes: 1

Bgcolor for alternative rows in a table dynamically using jQuery

Answers (2)

Related Questions