3

我的问题是：我正在提交一个带有 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/

我想我已经很接近了，但还不是很接近。

4

3 回答 3

3

我在你的桌子周围包裹了一个 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);
于 2012-10-19T09:28:51.953 回答
1

将 textarea的值包装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());
});​

提琴手链接：http: //jsfiddle.net/1stein/LmhJF/

于 2012-10-19T09:29:25.243 回答
1

也许首先用 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下方找到

希望这可以帮助

于 2012-10-19T09:30:55.750 回答