javascript - 如何解析 textarea 输入中的 html 并将 addClass 添加到 td 元素

Question

我的问题是这样的:我正在提交一个带有 textarea 输入的表单，其中包含一个 HTML 表格，内容中包含 TD 元素中的特定值，我正在尝试解析这些元素并根据它向 TD 添加一个类值(value);然后在发送到服务器之前将其保存回表单。

表格看起来像这样:

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

这是我现在拥有的 JS:

$('#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();
  });
});

所以基本上我只想解析字符串中的 HTML 并向元素添加类，然后保存回字符串，如果这有意义的话。

这是一个 fiddle :

http://jsfiddle.net/Z265d/

我想我已经很接近了，但还没有完全实现。

Answer 1

我在您的表格周围包裹了一个 div，并将 wrap 更改为 closest，这将获取表格，然后是其父级 (div)，并获取其 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);