3

私の問題は次のとおりです。テキストエリア入力を含むフォームを送信しています。これには、解析しようとしている TD 要素の特定の値を持つ HTML テーブルが含まれており、その値に基づいてクラスを 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

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

デモの下に見つけてください

お役に立てれば

于 2012-10-19T09:30:55.750 に答える