I have the following HTML:

<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
  <tr class="row1">
    <td></td>
  </tr>
  <tr class="row2">
    <td></td>
  </tr>
</table>

and the following jQuery :

<script>
$(document).ready(function () {
  var Tabletr= $(".ChatBox > tbody >  tr:odd");
});
</script>

how can i get the class name of Odd row in Jquery?

I have the following HTML:

<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
  <tr class="row1">
    <td></td>
  </tr>
  <tr class="row2">
    <td></td>
  </tr>
</table>

and the following jQuery :

<script>
$(document).ready(function () {
  var Tabletr= $(".ChatBox > tbody >  tr:odd");
});
</script>

how can i get the class name of Odd row in Jquery?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 27, 2012 at 5:34 Ken Redler 23.9k88 gold badges5959 silver badges6969 bronze badges asked Feb 27, 2012 at 5:19 ghanshyam.miranighanshyam.mirani 3,1011111 gold badges4949 silver badges8686 bronze badges 1

• possible duplicate of Get class name using jQuery – Brad Commented Feb 27, 2012 at 5:25

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Simply var $elems = $("table.ChatBox tr:odd"); should work.

To get their classes(heads up to Juicy Scripter below),

$elems.each(function(){   console.log(this.className); //do whatever with the class names. });

Try this:

<script>
    $(document).ready(function () {
        var Tabletr= $(".ChatBox").children("td:odd").attr("class");
        alert (Tabletr);
        }
    });
</script>

You can also use :first instead of :odd if you wish to get the first td class.

jQuery itself doesn't provide direct way to retrieve DOM element class other than using attr method of jQuery or className property for element in JavaScript after you get the elements:

$(document).ready(function () {
  var Tabletr= $(".ChatBox > tbody >  tr:odd");

  var firstElementClass = Tabletr.eq(0).attr('class');

  // Previous is the same as
  var firstElementClass = Tabletr.get(0).className;

  // Due to fact that Tabletr may contain more that one row you may want to iterate and collect classes names.
  var classes = [];
  Tabletr.each(function(){
    classes.push(this.className);
    // OR
    classes.push($(this).attr('class'));
  });
});

You can simplify your selector:

var Tabletr = $(".ChatBox tr:odd")

This gives you a jQuery object for each odd row in your table. If there's just one such row, you could do this:

var Tabletr = $('.ChatBox tr:odd')[0].className; // -> "row2"

But if there are multiple rows, you need something more like this:

var TableRowClasses = $(".ChatBox tr:odd").map( function(){
  return this.className;
}).get();

This gives you an array with every odd row's class as an element. So you'd end up with an array like this:

["row2","row4","row6"] // confusing odd-row classnames notwithstanding

I've look at your code and the following changes gave me the result your after.

  <table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
        <tr class="row1">
        <td></td>
        </tr>
        <tr class="row2">
            <td></td>
        </tr>

       <tr class="row3">
            <td></td>
        </tr>

       <tr class="row4">
            <td></td>
        </tr>
    </table>

 <script type="text/javascript" src="http://ajax.aspnetcdn./ajax/jQuery/jquery-1.7.1.min.js"></script>
 <script type="text/javascript">
     $(function () {

         $(".ChatBox tr:odd").each(function () {
             //test
             alert($(this).attr("class"));
         });

     });
 </script>