-1

I'm using Bootstrap to style my table, which is a basic to do list. I wanted to add a form input in one cell and check button in the cell directly next to it on the right. I wanted to use id="check-button". I think when I run my JavaScript and jQuery, I would need to use class if I want to add more buttons. I am now setting my HTML and JS.

Here is what I have for the HTML:

<div class = "container">
  <div class="col-md-8">
    <table class="table table-hover">
      <thead>
        <tr>
          <td>To Do</td>
          <td> Status</td>
       </tr>
    </thead>
    <tbody>
      <tr>
        <td>  
          <div class="input-group">
             <span class="input-group-addon">
             <input type="text" class="form-control" aria-label="..." placeholder="Text input" id="disabledInput">
             </span> 
           </div><!-- /input-group -->
        </td>
        <td id="check-button">
          <input type="checkbox" aria-label="...">
        </td>
      </tr>
    </tbody>
  </table>
</div>
Pang
  • 9,564
  • 146
  • 81
  • 122
Mark A
  • 1,995
  • 4
  • 18
  • 26
  • 1
    `When do you use “class” versus “id”?` = `I would need to use class if I want to add more buttons` – Norlihazmey Ghazali Nov 24 '15 at 02:08
  • An id is good for something which is one-of-a-kind. A class is good for something which has a lot of similar structures. – Paul S. Nov 24 '15 at 02:09
  • 3
    Possible duplicate of [CSS: div id VS. div class](http://stackoverflow.com/questions/544010/css-div-id-vs-div-class) – Sebastian Simon Nov 24 '15 at 02:10
  • 1
    `ID` is use to give an element a **unique identifier**. **Id should always be unique**. `Class` is use to give **multiple elements** an identifier. – guradio Nov 24 '15 at 02:10
  • Some people claim it's never good to use an ID which is pretty extreme but I support that view as I can't recall how many times something unique on a page has been converted to classes as the site grows in complexity and scope. – wunth Nov 24 '15 at 02:27

1 Answers1

3

As mentioned in comments id should be used as a unique identifier. To help enforce this your HTML Mark-up will not be valid if there are repeating id= attributes with the same value on the same page.

When it comes to deciding what to use, consider how the element will be selected within the JS/jQuery. Is the jQuery going to use that element and ONLY that element when processing? If so, then id is fine, if the element is part of a group and you would like to re-use the jQuery when something happens to any item in that group then using a class= is more appropriate.

id and class can also be used together. Say you want something to happen whenever a group is clicked, but also want to know exactly which item in the group was clicked, you could do something like:

HTML:

<div id="1" class="clickable"> Click Here!! </div>
<div id="2" class="clickable"> Click Here!! </div>
<div id="3" class="clickable"> Click Here!! </div>
<div id="Clicked"></div>

jQuery:

$('.clickable').click(function(){
   // Reset the color of all clickable elements
   $('.clickable').css("background-color","white");
   // Display which element we clicked
   $('#Clicked').html('You Clicked Div: ' +this.id);
   // Set the background color of the clicked element
   $(this).css("background-color","lightgreen");
});

JSFiddle

In this example the first three divs are part of a 'group' by using a common class="clickable" in the jQuery I can then trigger an event for any of these elements without having to duplicate code.

The .clickable selector is a Class Selector which means that it will be triggered for any element with class="clickable", this does not have to be a div.

The #Clicked selector is a Id Selector which will select the first element matching id="Clicked"

Once the .click event has been triggered the this.id can be used to get the exact element we clicked on out of the three, $(this) can be used to manipulate the clicked element and $('.clickable') can be used to manipulate all elements grouped by the class attribute.

Jake
  • 1,207
  • 2
  • 28
  • 46