怎么实现table的原地更新

2012-05-08

如何实现table的原地更新JScript code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

如何实现table的原地更新

JScript code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script>//Horizontal=横向列数//Vertical=向下行数//Width=图片宽度//Heigh=图片告诉function addRow(Horizontal,Vertical,Width,Height) {var MyTable = document.getElementById("MyTable");var MyTbody = document.getElementById("MyTbody");TbodyTotal=1for (i=1;i<=Horizontal;i++){       MyTR = document.createElement("tr");       MyTR.setAttribute("id","tr");       for (j=1;j<=Vertical;j++){              MyTD = document.createElement("td");              MyTD.align = "center";                                          MyImg = document.createElement("img");                                                       MyImg.height = Width;                            MyImg.width = Height;                                                                                    //---------------------                            Mya = document.createElement("A");                            Mya.href="http://www.163.com";                            Mya.appendChild(MyImg);                            //----------------                                                 MyTD.appendChild(Mya);                                          MyBr = document.createElement("br");                     MyTD.appendChild(MyBr);                                          MyDiv1 = document.createElement("div");                            MyTxt = document.createTextNode("价格");                            MyTD.appendChild(MyTxt);                            MyTD.appendChild(MyDiv1);                                                 MyDiv2 = document.createElement("div");                            var a = document.createElement("a");                            a.href = "#";                            a.innerHTML = "**产品名**";                            MyTD.appendChild(a);                     MyTD.appendChild(MyDiv2);                            MyTR.appendChild(MyTD);              TbodyTotal++;       }       MyTbody.appendChild(MyTR); }}function addRow2(Horizontal,Vertical,Width,Height) {    var MyTable = document.getElementById("MyTable");    var MyTbody = document.getElementById("MyTbody");    TbodyTotal=1    for (i=1;i<=Horizontal;i++){           MyTR = document.createElement("tr");           MyTR.setAttribute("id","tr");           for (j=1;j<=Vertical;j++){                  MyTD = document.createElement("td");                  MyTD.align = "center";                                                  MyImg = document.createElement("img");                                                                MyImg.height = Width;                                MyImg.width = Height;                                                                                                //---------------------                                Mya = document.createElement("A");                                Mya.href="http://www.baidu.com";                                Mya.appendChild(MyImg);                                //----------------                                                         MyTD.appendChild(Mya);                                                  MyBr = document.createElement("br");                         MyTD.appendChild(MyBr);                                                  MyDiv1 = document.createElement("div");                                MyTxt = document.createTextNode("改变");                                MyTD.appendChild(MyTxt);                                MyTD.appendChild(MyDiv1);                                                         MyDiv2 = document.createElement("div");                                var a = document.createElement("a");                                a.href = "#";                                a.innerHTML = "**改变后**";                                MyTD.appendChild(a);                         MyTD.appendChild(MyDiv2);                                    MyTR.appendChild(MyTD);                  TbodyTotal++;           }           MyTbody.appendChild(MyTR);     }    }</script></head><body><input type="button" value="生成" onClick="addRow(3,5,120,120)"><input type="button" value="生成2" onClick="addRow2(3,5,120,120)"><p>&nbsp;</p><table border="1" cellspacing="2" cellpadding="2" id="MyTable"><tbody id="MyTbody"></tbody></table></body></html>

这里有两个按钮“生成”跟“生成2”。楼主的本意是分别调用不同的函数来对同一个table的内容进行更新。但是发现更新的内容会并排在网页内并不是在一个table中进行更新，请问大家改如何解决呢，如果有详细方法，感激不尽。

[解决办法]

JScript code

var MyTbody = document.getElementById("MyTbody");MyTbody.innerHTML = ''; //两个函数中都加上这一行，先将tbody内容清空
[解决办法]
ie下改变tbody的innerHTML 是无效的

楼主参考下
HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta charset="gb2312" /><script>//Horizontal=横向列数//Vertical=向下行数//Width=图片宽度//Heigh=图片告诉function addRow(Horizontal,Vertical,Width,Height) {var MyTable = document.getElementById("MyTable");var MyTbody = document.getElementById("MyTbody");for(var i = MyTbody.childNodes.length - 1; i >= 0; i--){     MyTbody.removeChild(MyTbody.childNodes[i]); }TbodyTotal=1for (i=1;i<=Horizontal;i++){       MyTR = document.createElement("tr");       MyTR.setAttribute("id","tr");       for (j=1;j<=Vertical;j++){              MyTD = document.createElement("td");              MyTD.align = "center";                                          MyImg = document.createElement("img");                                                       MyImg.height = Width;                            MyImg.width = Height;                                                                                    //---------------------                            Mya = document.createElement("A");                            Mya.href="http://www.163.com";                            Mya.appendChild(MyImg);                            //----------------                                                 MyTD.appendChild(Mya);                                          MyBr = document.createElement("br");                     MyTD.appendChild(MyBr);                                          MyDiv1 = document.createElement("div");                            MyTxt = document.createTextNode("价格");                            MyTD.appendChild(MyTxt);                            MyTD.appendChild(MyDiv1);                                                 MyDiv2 = document.createElement("div");                            var a = document.createElement("a");                            a.href = "#";                            a.innerHTML = "**产品名**";                            MyTD.appendChild(a);                     MyTD.appendChild(MyDiv2);                            MyTR.appendChild(MyTD);              TbodyTotal++;       }       MyTbody.appendChild(MyTR); }}function addRow2(Horizontal,Vertical,Width,Height) {    var MyTable = document.getElementById("MyTable");    var MyTbody = document.getElementById("MyTbody");     for(var i = MyTbody.childNodes.length - 1; i >= 0; i--){         MyTbody.removeChild(MyTbody.childNodes[i]);     }    TbodyTotal=1    for (i=1;i<=Horizontal;i++){           MyTR = document.createElement("tr");           MyTR.setAttribute("id","tr");           for (j=1;j<=Vertical;j++){                  MyTD = document.createElement("td");                  MyTD.align = "center";                                                  MyImg = document.createElement("img");                                                                MyImg.height = Width;                                MyImg.width = Height;                                                                                                //---------------------                                Mya = document.createElement("A");                                Mya.href="http://www.baidu.com";                                Mya.appendChild(MyImg);                                //----------------                                                         MyTD.appendChild(Mya);                                                  MyBr = document.createElement("br");                         MyTD.appendChild(MyBr);                                                  MyDiv1 = document.createElement("div");                                MyTxt = document.createTextNode("改变");                                MyTD.appendChild(MyTxt);                                MyTD.appendChild(MyDiv1);                                                         MyDiv2 = document.createElement("div");                                var a = document.createElement("a");                                a.href = "#";                                a.innerHTML = "**改变后**";                                MyTD.appendChild(a);                         MyTD.appendChild(MyDiv2);                                    MyTR.appendChild(MyTD);                  TbodyTotal++;           }           MyTbody.appendChild(MyTR);     }    }</script></head><body><input type="button" value="生成" onClick="addRow(3,5,120,120)"><input type="button" value="生成2" onClick="addRow2(3,5,120,120)"><p>&nbsp;</p><table border="1" cellspacing="2" cellpadding="2" id="MyTable"><tbody id="MyTbody"></tbody></table></body></html>

热点排行

JavaScript

怎么实现table的原地更新