1

我正在尝试使用 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>

谢谢你的阅读

4

2 回答 2

1

结束 td 标记是错误的。

它应该是 ：

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

代替：

$('<td><td />').attr('id', 'chattypeorcell').append('or');
于 2010-08-08T18:51:20.387 回答
0

您使用“chattypeorcell”作为元素ID，因此它应该是唯一的，但实际上它已插入多次，这无助于正确生成DOM...我也想知道您为什么使用这么多DOM操作，应该有一种更直接的方式（将字符串作为 HTML 插入？）。

于 2010-08-08T18:54:58.060 回答