为什么我使用jquery动态的插入表格行出错，请帮忙
 |
leero
2009-04-02
如题，firefox下能加载进来，但是格式不正确，ie下能取到数据，但是没有显示出来，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>message</title>
<script src="jquery.js" type="text/javascript"></script>
<style>
.cPointer
{
cursor:pointer;
cursor:hand;
background-color:#afa;
}
.button {
width: 100px;
text-align: center;
padding: 10px;
background-color: #fff;
border-top: 3px solid #888;
border-left: 3px solid #888;
border-bottom: 3px solid #444;
border-right: 3px solid #444;
}
.highlighted {
background-color: #dfd;
font-style: italic;
}
.hidden
{
display:none;
}
#objload{
border: 1px solid #CC3300;
background-color: #CC3300;
line-height:18px;
position: absolute;
height:20px;
left:10px;
top: 10px;
color:#c0c0c0;
text-align:center;
font-size:11.5px;
padding:4px;
margin:0 auto;
width:130px;
}
.unnamed1 { font-size: 9pt}
.close1:link{TEXT-DECORATION: none}
.close1:visited {TEXT-DECORATION: none}
.close1:hover {TEXT-DECORATION: none}
</style>
<script>
var scrolltop=function(){
return document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;
};
var scrollleft=function(){
return document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft;
};
function o (){
_div1 = document.getElementById("objload");
initoffsetTop = (_div1.initoffsetTop)?_div1.initoffsetTop:_div1.offsetTop;
_div1.initoffsetTop = initoffsetTop;
_div1.style.top= scrolltop()+initoffsetTop+"px";
}
$(document).ready(function(){
$("#loadData").click(function()
{
$("#objload").removeClass("hidden");
o();
$("#messageTable").slideUp("slow",function()
{
var $r = new Date();
$r = $r.getTime();
$.get("messagedata.xml?v="+$r,function(data)
{
$(data).find("entry").each(function()
{
var entry = $(this);
var $html= '<TR>';
$html += '<TD align=middle width=30 bgColor=#fffff4 height=17>';
$html += '<TR><TD align=middle width=30 bgColor=#fffff4 height=17><P align=center><INPUT id=CHECKBOX type=checkbox value="'+entry.find('id').text()+'" name=messageIds></P></TD>';
$html += '<TD align=middle width=80 bgColor=#fffff4 height=17><A href="/browse/ListWriter.asp?vwriter=username&idwriter=336604&key=509664532" target=_blank>'+entry.find('fw').text()+'</A></TD>';
$html += '<TD align=middle width=80 bgColor=#fffff4 height=17><A href="/browse/ListWriter.asp?vwriter=用户服务&idwriter=336604&key=509664532" target=_blank>'+entry.find('tw').text()+'</A></TD>';
$html += '<TD bgColor=#fffff4 height=17>'+entry.find('msg').text()+'</TD>';
$html += '<TD align=middle width=110 bgColor=#fffff4 height=17>'+entry.find('dtime').text()+'</TD>';
$html += '<TD align=middle width=40 bgColor=#fffff4 height=17><A href="Messages_collect.asp?id=68233195&CollectFlag=0&idwriter=336604&key=509664532"><FONT color=red size=2>收藏</FONT></A></TD>';
$html += '</TR>\n';
$("#messageTable > tbody").append($html);
});
$("#messageTable").slideDown("slow",function(){$("#objload").addClass("hidden");});
});
});
});
});
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" bgcolor="#FFFFFF">
<tr>
<td>
<div align="center"><input type="button" id="loadData" value="加载数据"></div>
</td>
</tr>
</table>
<FORM name=msgfrm method=post>
<table border=0 width=100% cellspacing=1 cellpadding=3 height=73 align=center class=unnamed1 bgcolor=#6699cc id="messageTable">
<Thead>
<TD align=middle width=30 bgColor=#eeefff height=17>操作</TD>
<TD align=middle width=80 bgColor=#eeefff height=17>发送者</TD>
<TD align=middle width=80 bgColor=#eeefff height=17>接收者</TD>
<TD align=middle bgColor=#eeefff height=17>消息内容 </TD>
<TD align=middle width=110 bgColor=#eeefff height=17>发送日期</TD>
<TD align=middle width=40 bgColor=#eeefff height=17>收藏夹</TD></Thead>
<TBODY id="messageBody">
</TBODY>
</table>
</form>
<div id="objload" class="hidden">
数据正在加载中...
</div>
<div id="dictionary">
</div>
</body>
</html>
xml文件messagedata.xml内容如下 <?xml version="1.0" encoding="UTF-8" ?> <entries> <entry> <id><![CDATA[10896120]]></id> <dtime><![CDATA[2006-12-31 11:40:00]]></dtime> <itw><![CDATA[336604]]></itw> <tw><![CDATA[username]]></tw> <ifw><![CDATA[3774133]]></ifw> <fw><![CDATA[7y7y7y7y]]></fw> <tcf><![CDATA[0]]></tcf> <fcf><![CDATA[0]]></fcf> <msg><![CDATA[<img src=http://advertisement.tianya.cn/store/newyearlin.jpg border=0><font color=red><b>新年贺卡:</b>新年快乐，万事如意,</font>``。<font color=red>(数量 1，加168分)</font>]]></msg> </entry> <entry> <id><![CDATA[10285816]]></id> <dtime><![CDATA[2006-11-30 21:00:00]]></dtime> <itw><![CDATA[336604]]></itw> <tw><![CDATA[username]]></tw> <ifw><![CDATA[898464]]></ifw> <fw><![CDATA[物不平则鸣]]></fw> <tcf><![CDATA[0]]></tcf> <fcf><![CDATA[0]]></fcf> <msg><![CDATA[：）]]></msg> </entry> <entry> <id><![CDATA[10284959]]></id> <dtime><![CDATA[2006-11-30 20:07:00]]></dtime> <itw><![CDATA[2106905]]></itw> <tw><![CDATA[zc7238]]></tw> <ifw><![CDATA[336604]]></ifw> <fw><![CDATA[username]]></fw> <tcf><![CDATA[0]]></tcf> <fcf><![CDATA[0]]></fcf> <msg><![CDATA[兄弟还抽过吉庆？吉庆我抽过的多了去了，那时候高中的时候偷抽的]]></msg> </entry> </entries> |
|
leero
2009-04-02
请大家出手帮忙下，先行谢过了，
|
 |
bluky999
2009-04-10
不要贴这么多的代码啊。。。 看着都眼晕，还放不下
1 动态插入是可以简单地实现的； 建议你先写个小的简单点的程序测试一下，成功后再测试你自己的程序； 2 我做的动态插入，是先读取已有的行，然后在后面加上新插入的行，最后更新到容器中。 不过这个只是个人习惯问题吧 
|
|
leero
2009-04-13
已知道问题出在哪了，不能在table里面直接append行，【$("#messageTable > tbody").append($html);】，需要使用标准的dom来操作，
|
|
icss310
2011-11-09
|
|
JEBAIKEjava2012
2012-06-26
楼主你好，动态表格的操作，我一般都是使用html dom对象进行操作的。使用Table的addRow()方法添加行，TableRow的addCell()方法添加单元格。
|
 |
xiaofengyu
2012-07-09
楼主你好，jquery里头 变量命名 var $html= '<TR>'; 这个不太好吧，$ 符号在jquery里头是关键字呢。你的代码太多太复杂了，我贴一个我做过的自动添加一行tr的代码给你参考一下。
function addnew(obj) {
var length = $("#datatab tbody").children("tr").length;
var newtr = "<tr>";
newtr += '<td><input name=\"code\" type=\"text\" width=\"120\"> </td>';
newtr += '<td><input id=\"begin'+length+'\" name=\"begin\" type=\"text\" width=\"100\" onfocus=\"showdate('+0+')\"> </td>';
newtr += '<td><input name=\"end\" type=\"text\" width=\"100\" onfocus=\"showdate('+length+')\"> </td>';
newtr += '<td><textarea name=\"subject\" rows=\"1\" cols=\"30\"></textarea></td>';
newtr += '<td><input name=\"no\" type=\"text\" width=\"50\" onfocus=\"addnew(this)\"></td>';
newtr += '<td><a href=\"#\" onclick=\"delitem(this)\" style=\"text-decoration: none;color: gray;font-size: 12px;display: none;\">删除</a> </td>';
newtr += '</tr>';
$("#datatab").append(newtr);//datatab 是table的id
$(obj).removeAttr("onfocus");//删除本行的触发事件
$("#datatab tbody").children("tr").eq(length - 1).children("td").eq(5).children("a").show();//显示本行的删除链接
}我这段代码是在本行倒数第二个td获得焦点添加一个新的tr并显示当前所在行的删除链接，事件只允许触发一次，调用的时候是这样的addnew(this)。希望对你有帮助 |
|
bluishoul
2012-08-08
解析entry.find('id').text()时有问题哦...
|
