title: jquery - get html string of table cells
body: <p>I have some HTML that is being generated by some server-side code. The HTML that's generated looks like this:</p>
  
  <pre><code>&lt;table id="myChoices"&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="radio" name="choice" value="1" /&gt;&lt;/td&gt;
      &lt;td&gt;Monday&lt;/td&gt;
      &lt;td&gt;Mar 7&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="radio" name="choice" value="2" /&gt;&lt;/td&gt;
      &lt;td&gt;Tuesday&lt;/td&gt;
      &lt;td&gt;Mar 8&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="radio" name="choice" value="3" /&gt;&lt;/td&gt;
      &lt;td&gt;Wednesday&lt;/td&gt;
      &lt;td&gt;Mar 9&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="radio" name="choice" value="4" /&gt;&lt;/td&gt;
      &lt;td&gt;Thursday&lt;/td&gt;
      &lt;td&gt;Mar 10&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="radio" name="choice" value="5" /&gt;&lt;/td&gt;
      &lt;td&gt;Friday&lt;/td&gt;
      &lt;td&gt;Mar 11&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When a user makes a choice, I need to get the two cells next to it. For example, if someone chooses the third option, I'm trying to get the following:</p>
  
  <p><code>
  &lt;td&gt;Wednesday&lt;/td&gt;&lt;td&gt;Mar 9&lt;/td&gt;
  </code></p>
  
  <p>In my attempt to do this, I have the following jQuery:</p>
  
  <pre><code>function getHtml() {
    var html = '';
  
    var item = $("#myChoices input[type='radio']:checked");
    if (item.length &gt; 0) {
      var grandparent = item.parent().parent();
      var cells = grandparent.children();
  
      var html = '';
      for (var i = 0; i &lt; cells.length; i++) {
        if (i &gt; 0) {
          var cellHtml = cells[i];
          html += cellHtml;
        }
      }
    }
  
    return html;
  }
  </code></pre>
  
  <p>Unfortunately, my approach is not working. When I do the following:</p>
  
  <pre><code>var test = getHtml();
  console.log(test);
  </code></pre>
  
  <p>I see the following in the console window:</p>
  
  <pre><code>[object HTMLTableCellElement][object HTMLTableCellElement]
  </code></pre>
  
  <p>Why? How do I get the actual HTML string?</p>