Question

我的问题是这样的：我正在提交一个带有textarea输入的表单，其中包含内容中的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并向元素添加类，然后保存回字符串，如果这是有道理的。

这是一个小提琴：

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

Answer 2

将mytextarea textarea的值包装到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 Link：http://jsfiddle.net/1stein/LmhJF/

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

请在下面找到DEMO

希望这有帮助

如何解析textarea输入中的html和addClass到td元素

3 个答案: