如何正确使用追加而不会导致HTML表失真

时间:2015-03-12 23:57:28

标签: javascript jquery html html-table append

我有一个表,其中包含从MySQL数据库动态加载的链接行。

目前,为了让用户快速访问每个新字母的开头,就像使用命名锚一样,我有以下脚本,它可以很好地动态创建锚点和HTML表格的一小部分样本。您可以从代码中看到脚本将其添加到TD标记的前面,这会导致表失真。 JavaScript的新手,不知道我哪里出错了。我在网上找到了这个剧本。

总而言之,我希望Named Anchor在所有内容前面的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>

1 个答案:

答案 0 :(得分:0)

我需要的选项是pre​​pendTo。

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

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

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