首页 新闻 搜索 专区 学院

通过Ajax加载数据通过innerHTML到<tbody>里时每行多出<tr></tr>求解答

0
悬赏园豆:10 [已解决问题] 解决于 2013-04-14 12:50

通过Ajax加载数据通过innerHTML到<tbody>里时每行多出<tr></tr>,数据时存在js的tbody变量里,等到所有数据添加完成后替换到<tbody>中,下面是问题图片

Html代码:

界面:

 tbody的输出:

<tr class="tbodyTrEven">
    <td class="tbodyThumbImg"><img src="http://smartcdn.2besmarter.com/p/100/thumbnail/entry_id/0_2o2sfhpo/width/50/height/50/type/1/quality/100" /></td>
    <td class="tbodyEntryId">0_2o2sfhpo</td>
    <td class="tbodyTitle">smartuse</td>
    <td class="tbodyType"><img src="images/video.png" /></td>
    <td class="tbodyUpDated">13/03/01 09:03</td>
    <td class="tbodyDuration">01:57</td>
    <td class="tbodyPreview"><a style="font-size:13px;" href="play.php?id=0_2o2sfhpo&serviceUrl=http://smartcdn.2besmarter.com" title="预览&代码">预览&代码</a></td>
<tr/>
<tr class="tbodyTrOdd">
    <td class="tbodyThumbImg"><img src="http://smartcdn.2besmarter.com/p/100/thumbnail/entry_id/0_pexjfgho/width/50/height/50/type/1/quality/100" /></td>
    <td class="tbodyEntryId">0_pexjfgho</td>
    <td class="tbodyTitle">Sample Big Buck Bunny Trailer (HD)</td>
    <td class="tbodyType"><img src="images/video.png" /></td>
    <td class="tbodyUpDated">13/01/09 10:01</td>
    <td class="tbodyDuration">00:33</td>
    <td class="tbodyPreview"><a style="font-size:13px;" href="play.php?id=0_pexjfgho&serviceUrl=http://smartcdn.2besmarter.com" title="预览&代码">预览&代码</a></td>
<tr/>
<tr class="tbodyTrEven">
    <td class="tbodyThumbImg"><img src="http://smartcdn.2besmarter.com/p/100/thumbnail/entry_id/0_lub1nmnp/width/50/height/50/type/1/quality/100" /></td>
    <td class="tbodyEntryId">0_lub1nmnp</td>
    <td class="tbodyTitle">Sequence 05</td>
    <td class="tbodyType"><img src="images/video.png" /></td>
    <td class="tbodyUpDated">13/03/05 15:03</td>
    <td class="tbodyDuration">01:14</td>
    <td class="tbodyPreview"><a style="font-size:13px;" href="play.php?id=0_lub1nmnp&serviceUrl=http://smartcdn.2besmarter.com" title="预览&代码">预览&代码</a></td>
<tr/>
<tr class="tbodyTrOdd">
    <td class="tbodyThumbImg"><img src="http://smartcdn.2besmarter.com/p/100/thumbnail/entry_id/0_ab8m8enw/width/50/height/50/type/1/quality/100" /></td>
    <td class="tbodyEntryId">0_ab8m8enw</td>
    <td class="tbodyTitle">test</td><td class="tbodyType"><img src="images/video.png" /></td>
    <td class="tbodyUpDated">13/04/11 13:04</td>
    <td class="tbodyDuration">00:30</td>
    <td class="tbodyPreview"><a style="font-size:13px;" href="play.php?id=0_ab8m8enw&serviceUrl=http://smartcdn.2besmarter.com" title="预览&代码">预览&代码</a></td>
<tr/>

 

js代码:

 1 function getAllList(id){
 2     //加载数据前先加载loading动画
 3     var tbodyLoad='<tr style="height:535px;background-color:#f2f2f2;"><td style="width:708px;background-image:url(images/loading.gif);background-repeat:no-repeat;background-position:center center;"></td></tr>';
 4     $('.rightMediaList .tableBody tbody').html(tbodyLoad);
 5     //开始异步到后台获取数据
 6     $.post("uploadAjax.php",{action:'loadMedia',listId:id},
 7     function(data,textStatus){
 8         var tbody='';
 9         //遍历数据然后按格式放入tbody变量中
10         $(data).find('item').each(function(i){
11             if(i%2!=0){
12                 tbody+='<tr class="tbodyTrOdd">';
13             }else{
14                 tbody+='<tr class="tbodyTrEven">';
15             }
16             tbody+='<td class="tbodyThumbImg"><img src="http://smartcdn.2besmarter.com/p/'+$(this).find("partnerId").text()+'/thumbnail/entry_id/'+$(this).find("id").text()+'/width/50/height/50/type/1/quality/100" /></td>';
17             tbody+='<td class="tbodyEntryId">'+$(this).find("id").text()+'</td>';
18             tbody+='<td class="tbodyTitle">'+$(this).find("name").text()+'</td>'
19             switch($(this).find("type").text()){
20                 case '1':tbody+= '<td class="tbodyType"><img src="images/video.png" /></td>';break;
21                 case '2':tbody+= '<td class="tbodyType"><img src="images/image.png" /></td>';break;
22                 case '5':tbody+= '<td class="tbodyType"><img src="images/audio.png" /></td>';break;
23                 default:tbody+= '<td class="tbodyType">0</td>';break;
24             }
25             tbody+='<td class="tbodyUpDated">'+$(this).find("createAt").text()+'</td>';
26             tbody+='<td class="tbodyDuration">'+$(this).find("duration").text()+'</td>';
27             tbody+='<td class="tbodyPreview"><a style="font-size:13px;" href="play.php?id='+$(this).find("id").text()+'&serviceUrl='+$(this).find("preview").text()+'" title="预览&代码">预览&代码</a></td>';
28             tbody+='<tr/>';
29         });
30         //加载数据到页面的 <tbody>标签中
31         $('.rightMediaList .tableBody tbody')[0].innerHTML=tbody;    
32     },"xml");
33 }
无边华幕的主页 无边华幕 | 初学一级 | 园豆:63
提问于:2013-04-12 12:50
< >
分享
最佳答案
0

你的html代码写的有问题,你使用<tr/>,应该写成</tr>的。浏览器解析的时候以为你前一个tr结束(但是你没有结束符),后一个tr开始,内容为空,然后结束即把<tr/>解析成<tr></tr>,所以多出一个。

收获园豆:10
collapsar | 菜鸟二级 |园豆:260 | 2013-04-12 17:24

哈哈  多谢啊   我都完全找不出来问题所在了  ,谢谢了啊

无边华幕 | 园豆:63 (初学一级) | 2013-04-14 12:49
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册