练习

•练习：点击按钮增加一个网站的超链接
function createlink() {
            var divMain = document.getElementById("divMain");
            var link = document.createElement("a");
            link.innerText = "传智播客.Net培训";
            link.href = "http://net.itcast.cn";
            link.target = "_blank";
            divMain.appendChild(link);
        }

练习：点击按钮动态增加网站列表，分两列，第一列为网站的名字，第二列为带网站超链接的网站名。增加三行常见网站。浏览器兼容性问题

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 2 
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml" >
 5 <head>
 6     <title></title>
 7     <script type="text/javascript">
 8         function createTable() {
 9             var div = document.getElementById("d1");
10             //数组字典的使用：
11             var dic = { "baidu": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", 
12 
13 "cnbeta": "http://www.cnbeta.com" };
14             var table = document.createElement("table");
15             table.border = 1;
16              //for in是对对象的属性和方法进行遍历的
17             for (var key in dic) {
18                 var tr = document.createElement("tr");
19                 var td0 = document.createElement("td");
20                 td0.innerText = key;
21                 //把td0加到tr中
22                 tr.appendChild(td0);
23 
24                 var td1 = document.createElement("td");
25                 td1.innerHTML = "<a href='" + dic[key] + "'>" + dic[key] + "</a>";
26                 tr.appendChild(td1);
27                 //把tr添加到table中
28                 table.appendChild(tr);
29             }
30             //把table添加到div中
31             div.appendChild(table);
32         }
33     
34     </script>
35 </head>
36 <body>
37     <div id="d1"></div>
38     <input type="button" value="load。。。" onclick="createTable()" />
39 </body>
40 </html>
 1  //动态加载网站列表
 2         function loadArticle() {
 3             var data = new Array();
 4             data["新浪网"] = "http://www.sina.com";
 5             data["百度"] = "http://www.baidu.com";
 6             data["新浪网"] = "http://www.sina.com";
 7             var table1 = document.getElementById("table1");
 8             for (var key in data) {
 9                 var link = data[key];
10                 var tr = document.createElement("tr");
11                 var tdName = document.createElement("td");
12                 tdName.innerText = key;
13                 var tdLink = document.createElement("td");
14                 tdLink.innerHTML = "<a href='" + link + "'>" + key + "</a>";
15                 tr.appendChild(tdName);
16                 tr.appendChild(tdLink);
17                 table1.appendChild(tr);
18             }
19         }

•动态产生的元素，查看源代码是看不到的。通过DebugBar→Dom→文档→HTML可以看到。

•练习：无刷新评论（就是取出输入的内容，动态的向table中添加行和列）
使用的是appendChild在后面添加，不会冲掉以前的内容；
•<table>
•    <tr><td>猫猫：</td><td>沙发耶！</td></tr>
•</table>
•昵称：<input type="text" /><br />
•<textarea></textarea><br />
•<input type="button" value="评论" />
  
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     
 6     <script type="text/javascript">
 7         function add() {
 8             var name = document.getElementById("txtName").value;
 9             var content = document.getElementById("txtContent").value;
10 
11             var tr = document.createElement("tr");
12             var td0 = document.createElement("td");
13             td0.innerText = name;
14             tr.appendChild(td0);
15 
16             var td1 = document.createElement("td");
17             td1.innerText = content;
18             tr.appendChild(td1);
19 
20             var table = document.getElementById("re");
21             table.appendChild(tr);
22         }
23     </script>
24 </head>
25 <body>
26     <p>
27         最新新闻
28     </p>
29     
30     <table id="re"></table>
31     <hr />
32     
33     评论：
34         <input id="txtName" type="text" value="" /><br />
35         <textarea id="txtContent" cols="50" rows="10"></textarea>
36         
37         <br />
38         
39         <input type="button" value="评论" onclick="add()" />
40 </body>
41 </html>

 浏览器兼容性的例子：ie6，ie7对table.appendChild("tr")的支持和IE8不一样，用insertRow、insertCell来代替或者为表格添加tbody，然后向tbody中添加tr。FF不支持InnerText。

•所以动态加载网站列表的程序修改为：
•var tr = tableLinks.insertRow(-1);//FF必须加-1这个参数
•                var td1 = tr.insertCell(-1);
•                td1.innerText = key;
•                var td2 = tr.insertCell(-1);
•td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
•或者：<table id="tableLinks">
•<tbody></tbody>
•</table>，然后tableLinks. tBodies[0].appendChild(tr);
 1 //无刷新评论2
 2 
 3 
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 5 <html xmlns="http://www.w3.org/1999/xhtml" >
 6 <head>
 7     <title></title>
 8     <script type="text/javascript">
 9         function add() {
10             var name = document.getElementById("txtName").value;
11             var content = document.getElementById("txtContent").value;
12             
13             var table = document.getElementById("re");
14             var tr = table.insertRow(-1);
                    //table.insertRow(-1);返回行对象，-1表示插入到最后的位置
15             
16             var td = tr.insertCell(-1);
17             td.innerHTML = name;
18 
19             var td1 = tr.insertCell(-1);
20             td1.innerHTML = content;
21             
22         }
23     
24     </script>
25 </head>
26 <body>
27     <p>
28         最新新闻
29     </p>
30     
31     <table id="re"></table>
32     <hr />
33     
34     评论：
35         <input id="txtName" type="text" value="" /><br />
36         <textarea id="txtContent" cols="50" rows="10"></textarea>
37         
38         <br />
39         
40         <input type="button" value="评论" onclick="add()" />
41 </body>
42 </html>

 

posted @ 2013-03-24 15:30  Big.Eagle  阅读(123)  评论(0)    收藏  举报