CODEWITHSUNDEEP
javascriptjquery
dot-combubble
dot-combubble

Reputation: 45

Add class to HTML rows with jQuery plugin?

I have this table in HTML that I need to modify by using jQuery specifically. I need to apply 'header' class to main row and 'even' and 'odd' classes to the other rows in consecutive order.

As a result, the table will have a blue main header and light grey background row in each consecutive row. How can I achieve this? I have CSS already, just need to figure out how to grab these row and add the classes. You can see my attempts in attached .js file. What am I doing wrong?

"use strict";

// this JS file will call the plugin when the page loads

$(document).ready(function() {
   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

"use strict";
// this is where jQuery goes

$(function(){
 $('#important tr:first-child').addClass('header');

  $("#important tr:not(header)").each(function(index) {
    $(this).addClass((index % 2) ? "even" : "odd");
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">  
    <title>Alternating Row Plugin</title>
    <link rel="stylesheet" href="altrow.css">
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="jquery.altrow.js"></script>
    <script src="altrow.js"></script>
</head>
<body>
    <main>
      <h1>Important People in Computer Science</h1>
      <table id="important">
            <tr>
                <th>First Name</th><th>Last Name</th><th>Date of Birth</th><th>Accomplishment</th>
            </tr>
            <tr>
                <td>Charles</td><td>Babbage</td><td>12/26/1791</td>
                <td>Originated the concept of a programmable computer, invented the first mechanical computer.</td>
            </tr>
            <tr>
                <td>Ada</td><td>Lovelace</td><td>12/10/1815</td>
                <td>First computer programmer. Wrote an algorithm for Babbage's mechanical computer.</td>
            </tr>
            <tr>
                <td>Alan</td><td>Turing</td><td>6/23/1912</td>
                <td>Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer.</td>
            </tr>
            <tr>
                <td>Grace</td><td>Hopper</td><td>12/9/1906</td>
                <td>Invented the first compiler for a computer programming language, popularized the term "debugging" for fixing computer glitches.</td>
            </tr>
        </table>
    </main>
</body>
</html>

Upvotes: 0

Views: 135

Answers (2)

Lajos Arpad
Lajos Arpad

Reputation: 76814

As pointed out, you do not need Javascript, you can solve this with CSS. However, since your question specifically asked for Javascript, I will provide JS solutions for you. First, let's fix your typo:

$('#important tr:first-child').addClass('header');

Note the capital C above.

Just below the line above, do something like this

$("#important tr:not(header)").each(function(index) {
    $(this).addClass((index % 2) ? "even" : "odd");
});

Full solution:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">  
    <title>Alternating Row Plugin</title>
    <link rel="stylesheet" href="altrow.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="jquery.altrow.js"></script>
    <script src="altrow.js"></script>
    <style>
        .even {
            background-color: lightgray;
        }
        .odd {
            background-color: darkgray;
        }
        .header {
            background-color: lightblue;
        }
    </style>
    <script>
        $(function() {
            $('#important tr:first-child').addClass('header');
            $("#important tr:not(.header)").each(function(index) {
                $(this).addClass((index % 2) ? "even" : "odd");
            });
        });
    </script>
</head>
<body>
    <main>
      <h1>Important People in Computer Science</h1>
      <table id="important">
            <tr>
                <th>First Name</th><th>Last Name</th><th>Date of Birth</th><th>Accomplishment</th>
            </tr>
            <tr>
                <td>Charles</td><td>Babbage</td><td>12/26/1791</td>
                <td>Originated the concept of a programmable computer, invented the first mechanical computer.</td>
            </tr>
            <tr>
                <td>Ada</td><td>Lovelace</td><td>12/10/1815</td>
                <td>First computer programmer. Wrote an algorithm for Babbage's mechanical computer.</td>
            </tr>
            <tr>
                <td>Alan</td><td>Turing</td><td>6/23/1912</td>
                <td>Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer.</td>
            </tr>
            <tr>
                <td>Grace</td><td>Hopper</td><td>12/9/1906</td>
                <td>Invented the first compiler for a computer programming language, popularized the term "debugging" for fixing computer glitches.</td>
            </tr>
        </table>
    </main>
</body>
</html>

Upvotes: 1

cloned
cloned

Reputation: 6742

You don't need Javascript for this simple task, you can target even or oddelements via CSS:

tbody tr:nth-child(even)  {
  background-color: pink;
}

tbody tr:nth-child(odd)  {
  background-color: green;
  color: white;
}
<main>
  <h1>Important People in Computer Science</h1>
  <table id="important">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Date of Birth</th>
        <th>Accomplishment</th>
      </tr>
      <thead>
        <tbody>
          <tr>
            <td>Charles</td>
            <td>Babbage</td>
            <td>12/26/1791</td>
            <td>Originated the concept of a programmable computer, invented the first mechanical computer.</td>
          </tr>
          <tr>
            <td>Ada</td>
            <td>Lovelace</td>
            <td>12/10/1815</td>
            <td>First computer programmer. Wrote an algorithm for Babbage's mechanical computer.</td>
          </tr>
          <tr>
            <td>Alan</td>
            <td>Turing</td>
            <td>6/23/1912</td>
            <td>Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer.</td>
          </tr>
          <tr>
            <td>Grace</td>
            <td>Hopper</td>
            <td>12/9/1906</td>
            <td>Invented the first compiler for a computer programming language, popularized the term "debugging" for fixing computer glitches.</td>
          </tr>
          <tbody>
  </table>
</main>

Upvotes: 0

Related Questions