title: Edit HTML Table Data cell using Jquery
body: <p>I have an HTML table, and each cell of the table will have two data attributes. What I'm trying to do is set a button to switch the value being shown in the table between those two attributes. </p>
  
  <pre><code>&lt;table class="table1"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td data-original="A" data-new="B"&gt; A &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I'm able to set new text and get attributes outside the table, but whenever I try to within the table I keep receiving an error: </p>
  
  <blockquote>
    <p>'Uncaught -> TypeError: undefined is not a function'.</p>
  </blockquote>
  
  <p>I've been receiving this error for a number of commands <code>$('td').text()</code>, <code>.val()</code>, <code>.attr('td')</code>, <code>.getAttribute()</code>. 
  Am I missing a plugin or something for getting and setting values from tables?</p>
  
  <p>ANSWER: I figured out the reason, I was an idiot and didn't mention that there would be numerous TD elements with repeating tags. I eventually used Underscore.js's each method to iterate through them and parts of the below answer to swap the values.</p>