一个动态插入行到table中的异常

我用javascript动态向一个已经存在的table中插入行（该table为这样
<table id ="tbMsg" cellspacing="1" cellpadding="1" border="1" bgColor="#dcfbfc">
<tr></tr>
</table>
 然后我用这个
for(var i=0;i<arrResult.length-1;i++) 
{ 
arrTmp = arrResult[i].split("@@@"); 
num1 = arrTmp[0]; //字段num1的值 
num2 = arrTmp[1]; //字段num2的值 
row1 = tbMsg.insertRow(); 
cell1 = row1.insertCell(); 
cell1.innerText = num1+"说道:";
cell2 = row1.insertCell(); 
cell2.innerText = num2; 
} 
动态插入行。但是奇怪的是循环插入的行样式居然不一样，我并没有写任何css
第一行明显行高很高里面的文字没有按默认的显示，而第二行后就正常了，均是靠td显示的。
不知道是什么原因？

解决方案 »

  1.   

    我写了的，在执行先前的东西时我都用了一个清空函数
    function RemoveRow() 
    {  
    var iRows = tbMsg.rows.length; 
    for(var i=0;i<iRows-1;i++) 
    { 
    tbMsg.deleteRow(1); 
    } 
    } 
      

  2.   

    应该是
    tbMsg.deleteRow(0); 另外添加行时，为了兼容请使用
    insertRow(-1)
    insertCell(-1)
      

  3.   

    晕还是不对，应该是小于iRows
    for(var i=0;i<iRows;i++) 
    { 
    tbMsg.deleteRow(0); 
    }
      

  4.   

    不行啊,改成你这样也不行，我用把td的boder设置成为1看到第一行确实没有多余的行啊，就是比后面的行高很多，文字对齐方式也不对，其余每什么特别的
      

  5.   

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <style type="text/css">*{font-size:14px}button{margin:3px} </style> 
    <script type="text/javascript"> var mytable=null; window.onload=function(){ 
    mytable=new CTable("tbl",10); 
    } Array.prototype.each=function(f){for(var i=0;i <this.length;i++) f(this[i],i,this)} function $A(arrayLike){ 
    for(var i=0,ret=[];i <arrayLike.length;i++) ret.push(arrayLike[i]); 
    return ret 
    } Function.prototype.bind = function() { 
      var __method = this, args = $A(arguments), object = args.shift(); 
      return function() { 
        return __method.apply(object, args.concat($A(arguments))); 
      } 
    } 
    function CTable(id,rows){ 
    this.tbl=typeof(id)=="string"?document.getElementById(id):id;  
    if (rows && /^\d+$/.test(rows)) this.addrows(rows) 
    } CTable.prototype={ 
    addrows:function(n){          //随机添加n个tr 
    new Array(n).each(this.add.bind(this)) 
    }, 
    add:function(){          //添加1个tr 
    var self=this; 
    var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1); 
    var chkbox=document.createElement("INPUT") 
    chkbox.type="checkbox" 
    chkbox.onclick=self.highlight.bind(self) 
    td1.appendChild(chkbox) 
    td1.setAttribute("width","35") 
    td2.innerHTML="A： <INPUT NAME=A /> <br />B： <INPUT NAME=B />"; 
    }, 
    del:function(){          //删除所选tr 
    var self=this 
    $A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)}) 
    }, 
    up:function(){              //上移所选tr 
    var self=this 
    var upOne=function(tr){          //上移1个tr 
    if (tr.rowIndex>0){ 
    self.swapTr(tr,self.tbl.rows[tr.rowIndex-1]) 
    self.getChkBox(tr).checked=true 
    } 
    } 
    var arr=$A(self.tbl.rows).reverse() 
    if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){ 
    for(var i=arr.length-1;i>=0;i--){ 
    if (self.getChkBox(arr[i]).checked){ 
    arr.pop()            
    }else{ 
    break 
    } 
    } 
    } 
    arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)}); 
    }, 
    down:function(){ 
    var self=this 
    var downOne=function(tr){      
    if (tr.rowIndex <self.tbl.rows.length-1)  { 
    self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]); 
    self.getChkBox(tr).checked=true; 
    } 
    } 
    var arr=$A(self.tbl.rows) if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){ 
    for(var i=arr.length-1;i>=0;i--){ 
    if (self.getChkBox(arr[i]).checked){ 
    arr.pop() 
    }else{ 
    break 
    } 
    } 
    } 
    arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)}); 
    }, 
    highlight:function(){              //设置tr的背景色 
    var self=this; 
    var evt=arguments[0] || window.event 
    var chkbox=evt.srcElement || evt.target 
    var tr=chkbox.parentNode.parentNode 
    chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr) 
    }, 
    swapTr:function(tr1,tr2){            //交换tr1和tr2的位置 
    var target=(tr1.rowIndex <tr2.rowIndex)?tr2.nextSibling:tr2; 
    var tBody=tr1.parentNode 
    tBody.replaceChild(tr2,tr1); 
        tBody.insertBefore(tr1,target); 
    }, 
    getChkBox:function(tr){          //从tr得到 checkbox对象 
    return tr.cells[0].firstChild 
    }, 
    restoreBgColor:function(tr){          
    tr.style.backgroundColor="#ffffff"  
    }, 
    setBgColor:function(tr){ 
    tr.style.backgroundColor="#c0c0c0" 
    } 
    } function f(a,b){ 
    var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)}; 
    return sumRow(a)>sumRow(b)?1:-1; 
    } </script> </head> 
    <body> <button  onClick="javascript:mytable.add()">添加一行 </button> 
    <button  onClick="javascript:mytable.del()">删除选定行 </button> 
    <button  onClick="javascript:mytable.up()">上移选定行 </button> 
    <button  onClick="javascript:mytable.down()">下移选定行 </button> 
    <table width=100%> 
    <tr> 
    <td valign="top"> <table border id="tbl" width="80%"> </table> </td> 
    </tr> 
    </table> 
    </body> 
    </html> 
      

  6.   

    我找到错误的地方了是因为我第一行的第一个td中的数据前有其他我看不见的字符，（我用alert输出看）
    但是问题又来了，我以为那些字符是空格，于是使用函数
    function Trim（str）{
      while（str.charAr(0)==" "）{
        str.substring(1,str.length);
      }
      return str;
    }
    来去除字符串前面的空格，后又用alert查看发现前面还是有一段看不见的字符（知道不是空格）
    后我用
    for(var i=0;i<str.length-1;i++){
      alert(str[i]-'0');
    }
    输出查看是什么NaN，不知到是什么东西
    还有我的td中的数据是通过一个xmlhttp异步传过来的字符串（字符中有一些我自己加的‘@@’、‘##’分割），然后用javascript中split把他们原样取出来。
    发现取出来的都正常，但是唯独第一个分割开的字符串出现上面的问题，何解？