`

dom例子九（加载网址到表格-简易无刷新评论）

 
阅读更多

案例二十五：

简易无刷新评论

<html>
<head>
<title></title>
<script type="text/javascript">  
 function addComment(){
  var sname=document.getElementById("sname").value;
  var content=document.getElementById("comment").value;
  
  var tableComment=document.getElementById("tableComment");
  var tr=document.createElement("tr");
  var tdName=document.createElement("td");
  tdName.innerText=sname;
  tr.appendChild(tdName);
  
  var tdComment=document.createElement("td");
  tdComment.innerText=content;
  tr.appendChild(tdComment);
  
  tableComment.tBodies[0].appendChild(tr);
 }
 
</script>
</head>
<body>
<table id="tableComment">
<tbody></tbody>
</table>
name:<input id="sname" type="text"/><br/>
content:<textarea id="comment"></textarea><br/>
<input type="button" value="评论" onclick="addComment()"/>
</body>
</html>

案例二十六：

动态加载网站链接到表格中，不兼容IE6.浏览器兼容性的例子
在ie6，ie7下不支持table.appendChild("tr");

<html>
<head>
<title></title>
<script type="text/javascript"> 
 function LoadData(){
 
  
  var data={"百度":"http://www.baidu.com","新浪":"http://www.sina.com.cn","QQ":"http://www.qq.com"};
  var tableLinks=document.getElementById("tableLinks");
  var tr=document.createElement("tr");
  for(var key in data){
   var value=data[key];
   var td=document.createElement("td");
   td.innerHTML="<a href='"+value+"'>"+key+"</a>";
   tr.appendChild(td);
  }
  tableLinks.appendChild(tr);
  
 }
</script>
</head>
<body>
<table id="tableLinks"></table>
<input type="button" value="加载数据" onclick="LoadData()"/>
</body>
</html>


案例二十七：

解决上例的兼容性问题

<html>
<head>
<title></title>
<script type="text/javascript"> 
 function LoadData(){
 
  
  var data={"百度":"http://www.baidu.com","新浪":"http://www.sina.com.cn","QQ":"http://www.qq.com"};
  var tableLinks=document.getElementById("tableLinks");
  for(var key in data){
   var value=data[key];
   var tr=tableLinks.insertRow(-1);//firefox必须添加
   var td1=tr.insertCell(-1);
   td1.innerText=key;
   
   var td2=tr.insertCell(-1);
   td2.innerHTML="<a href='"+value+"'>"+key+"</a>";
  }  
 }
</script>
</head>
<body>
<table id="tableLinks"></table>
<input type="button" value="加载数据" onclick="LoadData()"/>
</body>
</html>


或者
<table id="tableLinks"><tbody></tbody></table>

tableLinks.childNodes[0].appendChild(tr);

分享到：
| dom例子八（开关灯-文本框-评分控件）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics