Проблема генерации HTML - PullRequest
Новая
       20

Проблема генерации HTML

1 голос
/ 08 августа 2010

Я пытаюсь сгенерировать небольшую часть страницы, используя jquery, который генерирует неправильные данные, даже если код выглядит солидно. 

$('#stages').html("");
    var stage = $("#stages");
    var L = $('<h2></h2>').attr('id', 'startachat').append('Who do you wish to connect to?');
    stage.append(L);
    var k = $('<table></table>').attr('id', 'chattypes');
    stage.append(k);
        var G = $('<tr></tr>');         
        k.append(G);
        var m = $('<td></td>');
        var s = $('<img />').attr({'src' : 'data/male_off.png', 'alt' : 'Male', 'class' : 'gender', 'id' : 'genderM'});
        var N = $('<td><td />').attr('id', 'chattypeorcell').append('or');
        var j = $('<td></td>');
        var D = $('<img />').attr({'src' : 'data/female_off.png', 'alt' : 'Female', 'class' : 'gender', 'id' : 'genderF'});
        var x = $('<td><td />').attr('id', 'chattypeorcell').append('or');
        var l = $('<td></td>');
        var z = $('<img />').attr({'src' : 'data/any_off.png', 'alt' : 'Anyone', 'class' : 'gender', 'id' : 'genderA'});

        G.append(m);
        m.append(s);
        G.append(N);
        G.append(j);
        j.append(D);
        G.append(x);
        G.append(l);
        l.append(z);

html, который он генерирует, имеет путь ко многим "или" данным таблицы

выход 

<div id="stages">
  <h2 id="startachat">Who do you wish to connect to?</h2>
  <table id="chattypes">
  <tbody>
  <tr>
    <td><img src="data/male_off.png" alt="Male" class="gender" id="genderM"></td>
    <td id="chattypeorcell">or</td><td id="chattypeorcell">or</td>
    <td><img src="data/female_off.png" alt="Female" class="gender" id="genderF"></td>
    <td id="chattypeorcell">or</td><td id="chattypeorcell">or</td>
    <td><img src="data/any_off.png" alt="Anyone" class="gender" id="genderA"></td>
  </tr>
  </tbody>
  </table>
</div>

Я хочу, чтобы это сгенерировало что-то похожее на это 

    <div id="stages"> 
      <h2 id="startachat">What's your gender?</h2> 
      <table id="chattypes"> 
        <tr> 
            <td id="chattypetextcell"><img src="data/male_off.png" alt="Male" class="gender" id="genderM"/></td> 
            <td id="chattypeorcell">or</td> 
            <td id="chattypevideocell"><img src="data/female_off.png" alt="Female" class="gender" id="genderF"/></td> 
            <td id="chattypeorcell">or</td> 
            <td id="chattypevideocell"><img src="data/any_off.png" alt="Anyone" class="gender" id="genderA"/></td> 
        </tr> 
      </table> 
    </div>

спасибо за чтение

Ответы [ 2 ]

1 голос
/ 08 августа 2010

Закрывающий тд тег неверен.

Он должен быть: 

$('<td></td>').attr('id', 'chattypeorcell').append('or');

вместо: 

$('<td><td />').attr('id', 'chattypeorcell').append('or');
0 голосов
/ 08 августа 2010

вы используете "chattypeorcell" в качестве идентификатора элемента, поэтому он должен быть уникальным, но на самом деле он вставляется несколько раз, что не должно помочь правильно генерировать DOM ... мне также интересно, почему вы используете так многоDOM манипуляции, должен быть более прямой путь (вставить строку как HTML?).

...