How to extract value from table with mixture of html elements
<p>I have a table which contains a combination of plain text, input textboxes, selects, and spans. I need to iterate through the table row by row and pull out the value in each cell. Within my table all <code>&lt;tr&gt;</code> have a particular css class. </p>

<pre><code>  $(".gridBody").each(function(rowindex){
                $(this).find("td").each(function(cellIndex){
                   var cell = $(this).first()
   })
</code></pre>

<p>In my debugger I can see what kind of object is being returned by $(this).first() but I can't find out how to get into its attributes. I have tried using jqueries html parser to turn it back into a dom element, but instead of getting, for example, a textbox, I get something like [[html inputtextbox]]. Most of the methods that work on regular dom elements are not working for me. </p>

<p>If I use $(this)[0].innerText it returns the correct value when the contents of the cell are plain text, but not when they are a form of input or nested in a span element. What I would really like to be able to do is get a regular html dom element back that I can then check the type of with $.is() and then vary much logic from there. </p>

<p>How do I get the first child element in a table cell as an html dom element that I can manipulate with jquery like any other dom element? </p>