title: Change data-attribute on click of HTML elements
body: <p>I am trying to apply changes to the DOM when a <code>&lt;tr&gt;</code> is clicked. When clicked, it should add <code>data-state=enabled</code> and <code>data-display=expanded</code> to the clicked <code>&lt;tr&gt;</code> while applying <code>data-state=disabled</code> and <code>data-display=collapsed</code> to <strong>every other</strong> <code>&lt;tr&gt;</code>.</p>
  
  <p>So it should look like highlighting the clicked row while disabling the other rows. </p>
  
  <p>Then, when a row is highlighted, and a user clicks elsewhere, it should <strong>reset to default</strong>, i.e. <code>data-state=enabled</code> and <code>data-display=collapsed</code> for all <code>&lt;tr&gt;</code>'s</p>
  
  <p>Currently, I have it working so that when a <code>&lt;tr&gt;</code> is clicked, that row is highlighted and all others disabled. However, <strong>the script is missing the reset to default</strong> because if another <code>&lt;tr&gt;</code> is clicked, it immediately highlights that one and disables the rest.</p>
  
  <p>I would like to do this in vanilla javascript but I am also open to using jQuery if it is substantially easier and won't affect performance noticably.</p>
  
  <p>Here is the JSbin with working code to see where it's at:
  <a href="https://jsbin.com/kirati/" rel="nofollow">https://jsbin.com/kirati/</a></p>
  
  <p>And the code so far:</p>
  
  <pre><code>&lt;table class="table"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th class="sort-key asc"&gt;&lt;a href="#"&gt;Pet Name &lt;/a&gt;&lt;/th&gt;
                              &lt;th&gt;&lt;a href="#"&gt;Owner (Last, First)&lt;/a&gt;&lt;/th&gt;
                              &lt;th&gt;&lt;a href="#"&gt;Species&lt;/a&gt;&lt;/th&gt;
                              &lt;th&gt;&lt;a href="#"&gt;Breed&lt;/a&gt;&lt;/th&gt;
                              &lt;th&gt;&lt;a href="#"&gt;ID&lt;/a&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  Fluffy
                                  &lt;div class="table-row__expanded-content"&gt;
                                      &lt;data-key&gt;Sex: &lt;/data-key&gt; &lt;data-value&gt;Male&lt;/data-value&gt;&lt;br /&gt;
                                      &lt;data-key&gt;DOB: &lt;/data-key&gt; &lt;data-value&gt;12/08/2010&lt;/data-value&gt; &lt;br /&gt;
                                      &lt;data-key&gt;Weight: &lt;/data-key&gt; &lt;data-value&gt;20 lbs&lt;/data-value&gt; &lt;br /&gt;
                                      &lt;data-key&gt;Location: &lt;/data-key&gt; &lt;data-value&gt;Kennel 2B&lt;/data-value&gt; &lt;br /&gt;
                                      &lt;data-key&gt;Temperament: &lt;/data-key&gt; &lt;data-value&gt;Aggresive&lt;/data-value&gt; &lt;br /&gt;
                                      &lt;data-key&gt;Allergies: &lt;/data-key&gt; &lt;data-value&gt;Sulfa, Penicillin, Peanuts&lt;/data-value&gt;
                                  &lt;/div&gt;
                              &lt;/td&gt;
                              &lt;td&gt;Anderson, James&lt;/td&gt;
                              &lt;td&gt;Dog&lt;/td&gt;
                              &lt;td&gt;Bulldog-Shitzu&lt;/td&gt;
                              &lt;td&gt;ABCDE1234567&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Feather&lt;/td&gt;
                              &lt;td&gt;Michelle Charlotte, &lt;br /&gt; Angel Vanessa&lt;/td&gt;
                              &lt;td&gt;Cat&lt;/td&gt;
                              &lt;td&gt;American Bobtail&lt;/td&gt;
                              &lt;td&gt;FGHIJ1234567&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Fluffer-Nutter&lt;/td&gt;
                              &lt;td&gt;Rakerstraw, Rickey&lt;/td&gt;
                              &lt;td&gt;Dog&lt;/td&gt;
                              &lt;td&gt;American Eskimo&lt;/td&gt;
                              &lt;td&gt;KLMNO1234567&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Farley&lt;/td&gt;
                              &lt;td&gt;Cunningham, Stephanie&lt;/td&gt;
                              &lt;td&gt;Dog&lt;/td&gt;
                              &lt;td&gt;Pomeranian&lt;/td&gt;
                              &lt;td&gt;PQRST1234567&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Fuzzy&lt;/td&gt;
                              &lt;td&gt;Venice, Harding&lt;/td&gt;
                              &lt;td&gt;Cat&lt;/td&gt;
                              &lt;td&gt;Burmese&lt;/td&gt;
                              &lt;td&gt;UVWXY1234567&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="alphabet-label"&gt;
  
                              &lt;td&gt;G&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Goldie&lt;/td&gt;
                              &lt;td&gt;Cherilyn, Mitchener&lt;/td&gt;
                              &lt;td&gt;Dog&lt;/td&gt;
                              &lt;td&gt;Chihuahua-Maltese&lt;/td&gt;
                              &lt;td&gt;ZABCD1234567&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  </code></pre>
  
  <p>And the Javascript</p>
  
  <pre><code>window.onload = function () {
  
      var tablerow = document.body.getElementsByTagName('tr');
      console.log(tablerow);
  
       // Convert the HTMLCollection into a true javascript Array, so we can do "stuff" with it       
      var tablerowArr = Array.prototype.slice.call(tablerow);
      console.log(tablerowArr);
  
  // Do stuff
      tablerowArr.forEach(function (value, i) {
          console.log(i, value);
  
          tablerow[i].onclick = function (e) {
              //console.log("clicked!");
  
  
              var newArr = tablerowArr.slice(i, i + 1);
              //console.log(tablerow);
              console.log(i);
              //console.log(tablerowArr);
              console.log('newArr', newArr);
  
  
              tablerowArr.forEach(function (value, i) {
  
                  // first reset all instances of data-XXX  
                  tablerowArr[i].setAttribute('data-display', "collapsed");
                 // tablerowArr[i].setAttribute('data-state', "enabled");
  
                  // Set the &lt;tr&gt; data-display attribute to expanded/collapsed on click
                  newArr[0].setAttribute('data-display', tablerowArr[i].getAttribute('data-display') === "collapsed" ? "expanded" : "collapsed");
                  //tablerowArr[i].setAttribute('data-display', tablerowArr[i].getAttribute('data-display') === "collapsed" ? "expanded" : "collapsed");
  
                  // Set the &lt;tr&gt; data-state attribute to enabled/disabled on click
                  newArr[0].setAttribute('data-state', newArr[0].getAttribute('data-state') === "disabled" ? "enabled" : "enabled");
                  tablerowArr[i].setAttribute('data-state', newArr[0].getAttribute('data-state') === "enabled" ? "disabled" : "enabled");
  
              });
  
              e.preventDefault();
          };
      });
  };
  </code></pre>