如何解析文本区域输入的HTML并向td元素添加类？

Question

我的问题是：我正在提交一个表单，其中包含一个文本区域输入框，该输入框的内容包含一个HTML表格，其中TD元素中具有特定值，我试图解析并根据该值向TD添加类；然后将其保存回表单，然后再发送到服务器。

表格大致如下：

<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/

我觉得我快到了，但还没完全到达。

- jdub

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);

- Jeff

Answer 2

将 mytextarea 文本区域的值包装成 jQuery 对象：

$('#form').submit(function() {
    var table = $($('#mytextarea').val());
    var styles = {
        "r": "red",
        "g": "green",
        "y": "yellow",
        "b": "blue"
    };

    $('td', table).each(function() {
        var text = $(this).text();
        if (styles[text]) {
            $(this).addClass(styles[text]);
        }
    });

    $('#mytextarea').val(table.html());
});​

Fiddler链接：http://jsfiddle.net/1stein/LmhJF/

- Yuriy Rozhovetskiy

---

这也可以，只需要在表格周围加上<div>包装器即可恢复表格标签。谢谢。 - jdub

Answer 3

或许可以先使用jQuery将文本包装起来，然后再将其转换回文本。

var table = $('<table><tr><td>r</td><td>y</td></tr><tr><td>g</td><td>b</td></tr></table>');

$('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.wrap('table').parent().html();
});

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

请查看下面的演示 希望这有所帮助。

- Dhiraj