如何正确使用append而不造成HTMLTable失真

Question

我有一个 table，它有从 MySQL 数据库动态加载的链接行。

目前，为了让用户快速访问每个新字母的开头，就像使用命名锚点一样，我有以下脚本，它在动态创建锚点和 HTML table。从代码中可以看出，脚本不断将其添加到 TD 标记的前面，这导致 table 被扭曲。 JavaScript 的新手，不确定我哪里出错了。我在网上找到了脚本。

总而言之，我希望命名锚显示在所有内容前面的 TD 标签内。

<script type='text/javascript'>//<![CDATA[ 
$(function(){
char = "";
$('.myTable').each(function(){
    td = $(this);
    $(this).child('td#front').each(function(){
        x = $(this).text()[0];
        if(x!=char){
            char = x;
            q = $('<div class="lettergroup" />').appendTo(td);
            $('<a name="'+char+'" />').appendTo(q);
            $('<h2>'+char+'</h2>').appendTo(q);
        }
        $(this).appendTo(q);
    });
});

$('.lettergroup').each(function(lgi){
    lg = $(this);
    c = $(this).child('td#front');
    l = c.length;
    h = Math.ceil(l/2);
    if(l>1){
        lc = $('<div class="lettercolumn" />').prepend(lg);
        c.each(function(si){
            if(si==h) lc = $('<div class="lettercolumn" />').appendTo(lg);
            $(this).prepend(lc);
                
        });
    $('<br class="clear" />').appendTo(lg);
    }
});




});//]]>  

</script>

<table class="myTable">
  <tr>
    <td>Text</td>
    <a class="letterAnchor" name="A"></a><td class="front">A Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

Answer 1

我需要的选项是 prependTo。

在没有 To 的情况下自行添加不处理 HTML

有关详细信息，请参阅此页面。

http://www.w3schools.com/jquery/jquery_ref_html.asp

如何正确使用append而不造成HTMLTable失真

How to use append correctly without causing HTML Table distortion

html

javascript

jquery

html-table

append