Question

My problem is this: I’m submitting a form with a textarea input, which contains an HTML table in the content with specific values in the TD elements which I am trying to parse and add a class to the TD based on that value; then save that back to the form before being sent to the server.

The table looks something like this:

<table>
<tr>
  <td>b</td>
  <td>r</td>
</tr>
<tr>
  <td>y</td>
  <td>n</td>
</tr>
</table>

And here’s the JS I have right now:

$('#form').submit(function() {
  var table = $('#mytextarea').val();

  $('td', table).each(function() {
    var td = $(this);
    switch(td.text()) {
      case 'r':
        td.addClass('red');
        break
      case 'y':
        td.addClass('yellow');
        break
    }
    table = td.wrap('table').parent().html();
  });
});

So essentially I just want to parse HTML inside of a string and add classes to the elements, then save back to the string, if that makes sense.

Here’s a fiddle:

http://jsfiddle.net/Z265d/

I think I’m close but not quite there yet.

Answer 1

I wrapped a div around your table, and changed the wrap to closest, which will get the table, then its parent (div), and get its html.

http://jsfiddle.net/Z265d/3/

var table = '<div><table><tr><td>r</td><td>y</td></tr><tr><td>g</td><td>b</td></tr></table></div>';

$('td', table).each(function() {
  var td = $(this);
  switch(td.text()) {
    case 'r':
      td.addClass('red');
      break;
    case 'y':
      td.addClass('yellow');
      break;
    case 'b':
      td.addClass('blue');   
      break;
    case 'g':
      td.addClass('green');   
      break;          
  }
  table = td.closest('table').parent().html();
});

$('#output').text(table);