Extracting data from HTML table using jquery

Question

I am attempting to take a generated table and create an object out of it using jquery. I have looked up examples but am getting some odd behavior when I try to implement. Given this simplified version of my table (generated via Spring MVC):

<table id="notices"> 
  <thead>
    <tr>
      <td class="columnheader">Order</td>
      <td class="columnheader" style="display: none;">ID</td>
      <td class="columnheader">Title</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="formlabel"><input class="fields" size="2" type="text" value="3"></td>
      <td class="formlabel" style="display: none;">JP-L2913666442781178567X</td>
      <td class="formlabel"><a href="javascript:void(0);" class="editNoticeOpen">*Notice1</a></td>
    </tr>

    <tr>
      <td class="formlabel"><input class="fields" size="2" type="text" value="2"></td>
      <td class="formlabel" style="display: none;">JP-L2913666442760937100X</td>
      <td class="formlabel"><a href="javascript:void(0);" class="editNoticeOpen">Quiz Notice - Formative</a></td>
    </tr>
  </tbody>
</table>

And snippet of my current script:

var noticeMap = $('#notices tbody tr').map(function() {
    var $row = $(this);
    return {
      sequence: $row.find(':nth-child(1)').text(),
      noticeUID: $row.find(':nth-child(2)').text()
    };
});

When I de[fire]bug, noticeMap looks like this:

Object { sequence="*Notice1", noticeUID="JP-L2913666442781178567X"}, 
Object { sequence="Quiz Notice - Formative", noticeUID="JP-L2913666442760937100X"}

Somehow :nth-child(1) is retrieving the title, the third td . I believe it has to do with retrieving the value of the input, but am not sure where to go from here. Maybe because the input field is within the td child I am specifying, it is not considered a direct descendant, so the proper text is not retrieved? Just seems odd to me that it would then skip to the 3rd td. Alas, I am still learning with jquery, and humbly request any ideas and guidance.

Thanks!

Answer 1

You're right about the input being the issue, you have to get the value of the input inside then td , which is not defined as a text node, but as its own element, therefore you have to specify the child element within the jQuery selector. Also .text() won't work for input elements, you can read its value with .val() .

This will work for you to get the right value into your object:

$row.find(':nth-child(1) input').val();

Or using .eq()

var noticeMap = $('#notices tbody tr').map(function() {
    var $cells = $(this).children();
    return {
      sequence: $cells.eq(0).children('input').val(),
      noticeUID: $cells.eq(1).text()
    };
});

Or into a single object with key/value pairs:

var noticeMap = {};

$('#notices tbody tr').each(function() {
  var $cells = $(this).children();
  noticeMap[$cells.eq(0).children('input').val()] = $cells.eq(1).text();      
});

I'm not too sure tho why your original attempt returns the text inside the 3rd td . That is really odd. I'll have a tinker with it.

Edit

It seems to me that .find() is somehow being smart about what it returns, it seems to realise that calling .text() does not return anything on the first match it finds (the first td ), it therefore travels down the DOM to find the next element which does have a :first-child , which matches the a tag inside the 3rd td , then it returns the text of that a tag. When I removed the a around the title, .find() started returning "" again, I think that is because it couldn't find another match after the first one didn't return anything useful.

Using .children() would be safer in this case, as it only finds direct descendants and doesn't travel down the DOM.

Answer 2

For better performance, use .eq() on the matched set:

var noticeMap = $('#notices tbody tr').map(function() {
    var $cells = $(this).children();
    return {
      sequence: $cells.eq(0).find('input').val(),
      noticeUID: $cells.eq(1).text()
    };
});