How to extract value from table with mixture of html elements

Question

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 <tr> have a particular css class.

  $(".gridBody").each(function(rowindex){
                $(this).find("td").each(function(cellIndex){
                   var cell = $(this).first()
   })

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.

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.

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?

have a look at http://stackoverflow.com/questions/5347357/jquery-get-selected-element-tag-name if you want to identify the type of tag you are handling. Do you always know that the object you want the value of is the first thing inline? — Tim Ogilvy, Mar 17 '16 at 00:49
on a side-note, when iterating a jquery collection with `.each` then in that context `$(this) === $(this).first()` since `this` corresponds to a single element in the collection. — Gabriele Petrioli, Mar 17 '16 at 01:14

Roko C. Buljan · Answer 1 · 2016-03-17T01:07:56.570

1

var collected = $("#myTable td").find("input, textarea, span").map(function(){
  return this.value || this.textContent;
}).get();

console.log( collected ); // an array holding values or text

http://jsbin.com/zewixe/2/edit?html,css,js,console,output

If you want only the immediate children than use the right > selector

(">input, >textarea, >span")

edited Mar 17 '16 at 01:07

answered Mar 17 '16 at 00:56

Roko C. Buljan

196,159
39
305
313

This works great for input boxes and spans, but it misses the plan text. Something like plain text. Any suggestions? Thank you – user3538411 Mar 17 '16 at 02:20

score 0 · Answer 2 · answered Mar 17 '16 at 01:05

Heres how I would do it:

<table>
  <tr>
    <td> 
      <h1>Some stuff.</h1>
    </td>
  </tr>
  <tr>
    <td> 
      <input type="text" value="1"/>
    </td>
    <td> 
      <input type="text" value="2"/>
    </td>
  </tr>
  <tr>
    <td> 
      <input type="text" value="3"/>
    </td>
  </tr>
  <tr>
    <td> 
      <input type="text" value="4"/>
    </td>
  </tr>
</table>

$(function() {

function getFormData(selector){
    'use strict';

    var formTypes = {
        text: 'text',
        radio: 'radio',
        select: 'select'
    },
    values = [];

    $(selector).children().each(function(idx, childNode) {
        if (childNode.getAttribute('type') && formTypes[childNode.getAttribute('type')]) values.push(childNode.value);
    }); 

    return values;
}

alert(
    getFormData('table tr td.someClass')
    );

})();

http://codepen.io/nicholasabrams/pen/RaKGjZ

How to extract value from table with mixture of html elements

2 Answers2