动态增加table的行时，为什么行与行之间的距离会变粗？
代码如下：
<script type= "text/javascript ">
function getRowName(rowNum){
switch (rowNum){
case 1:return "AREA ";
case 2:return "CITY ";
case 3:return "POWERCUTLINE ";
case 4:return "POWERCUTCOUNTRYSIDE ";
case 5:return "POWERCUTTOWN ";
case 6:return "POWERCUTVILLAGE ";
case 7:return "POWERCOUNTRYSIDE ";
case 8:return "POWERTOWN ";
case 9:return "POWERVILLAGE ";
case 10:return "RECOVERREMARK ";
}
}
function sum(rowNum,curLineNum){
var s = 0;
var rowName = getRowName(rowNum);
//alert( "rowName: "+rowName);
for(i = 1; i <= curLineNum; i++){
elmentId =rowName+ " "+i+ " "+rowNum;
// alert(elmentId);
if($(elmentId).value != " "){
// alert( "POWERCUTLINE "+i+ " "+rowNum);
s = s + parseInt($(elmentId).value);
}
}
return s;
}
function calcaute(rowNum){
$( "total "+rowNum).value = sum(rowNum,$( "curLineNum ").value);
}
</script>
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> dd </title>
<style type= "text/css ">
body {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
font-size: 9pt;
}
table {
font-size: 9pt;
text-align: center;
width:600px;
}
table tr {
height:25px;
}
table td input {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
</style>
<body>
<table id= "mainTable " border= "0 " cellpadding= "0 " cellspacing= "1 "
bgcolor= "#316AC5 " align= "center ">
<tr bgcolor= "#FFFFFF ">
<td colspan= "10 ">
<strong> afsadfs
</td>
</tr>
<tr bgcolor= "#FFFFFF ">
<td colspan= "10 " align= "left ">
safsadf :
2007-05-09 12时
</td>
</tr>
<tr bgcolor= "#FFFFFF " >
<td rowspan= "2 " width= "60px " >
<strong> safasdfsd </strong>
</td>
<td rowspan= "2 " width= "60px ">
<strong> fasdfa
</td>
<td rowspan= "2 ">
<strong> dddd </strong>
</td>
<td colspan= "3 ">
<strong> sfasdf </strong>
</td>
<td colspan= "3 ">
<strong> sfasdf </strong>
</td>
<td>
<strong> asfasf </strong>
</td>
</tr>
<tr bgcolor= "#FFFFFF ">
<td>
<strong> sfasf </strong>
</td>
<td>
<strong> d </strong>
</td>
<td>
<strong> dd </strong>
</td>
<td>
<strong> aa </strong>
</td>
<td>
<strong> fdd </strong>
</td>
<td>
<strong> dd </strong>
</td>
<td>
<strong> add </strong>
</td>
</tr>
<tr bgcolor= "#FFFFFF " id= "row "1>
<td>
<input id= "AREA11 " type= "text " value= " " />
</td>
<td>
<input id= "CITY12 " type= "text " value= " " />
</td>
<td>
<input id= "POWERCUTLINE13 " type= "text " value= " " onchange= "calcaute(3) " />
</td>
<td>
<input id= "POWERCUTCOUNTRYSIDE14 " type= "text " value= " " onchange= "calcaute(4) " />
</td>
<td>
<input id= "POWERCUTTOWN15 " type= "text " value= " " onchange= "calcaute(5) " />
</td>
<td>
<input id= "POWERCUTVILLAGE16 " type= "text " value= " " onchange= "calcaute(6) " />
</td>
<td>
<input id= "POWERCOUNTRYSIDE17 " type= "text " value= " " onchange= "calcaute(7) " />
</td>
<td>
<input id= "POWERTOWN18 " type= "text " value= " " onchange= "calcaute(8) " />
</td>
<td>
<input id= "POWERVILLAGE19 " type= "text " value= " " onchange= "calcaute(9) " />
</td>
<td>
<input id= "RECOVERREMARK110 " type= "text " value= " " onchange= "calcaute(10) " />
</td>
</tr>
<input type= "hidden " id= "curLineNum " value= "1 ">
<input type= "hidden " id= "curSelectedLineNum " value= " ">
<tr bgcolor= "#FFFFFF ">
<td>
总计
</td>
<td>
</td>
<td>
<input id= "total3 " type= "text " value= " " readonly />
</td>
<td>
<input id= "total4 " type= "text " readonly/>
</td>
<td>
<input id= "total5 " " type= "text " readonly/>
</td>
<td>
<input id= "total6 " type= "text " readonly/>
</td>
<td>
<input id= "total7 " type= "text " readonly/>
</td>
<td>
<input id= "total8 " type= "text " readonly />
</td>
<td>
<input id= "total9 " type= "text " readonly/>
</td>
<td>
<input id= "total10 " type= "text " readonly/>
</td>
</tr>
<tr bgcolor= "#FFFFFF ">
<td colspan= "10 ">
<button onclick= "deleteRow() ">
删除此行
</button>
<button onclick= "addRow() ">
增加一行
</button>
<button>
保存
</button>
</td>
</tr>
</table>
</body>
</html>
<script>
function $(id){
return document.getElementById(id);
}
function addRow(){
p = $( "mainTable ");
tr = p.insertRow(parseInt($( "curLineNum ").value)+4);
tr.bgcolor= "#FFFFFF ";
$( "curLineNum ").value= parseInt($( "curLineNum ").value)+1;
tr.setAttribute( "id ", "row "+$( "curLineNum ").value);
for(i = 1; i <=2; i++){
var inputId = getRowName(i)+$( "curLineNum ").value+i;
var s = " <input id= ' "+inputId+ " ' type= 'text ' /> ";
td= tr.insertCell();
td.innerHTML= s;
}
for(i = 3; i <=10; i++){
var inputId = getRowName(i)+$( "curLineNum ").value+i;
var s = " <input id= ' "+inputId+ " ' type= 'text '/> ";
td= tr.insertCell();
td.innerHTML= s;
}
}
</script>
当我增加一行时，增加的行与行之间的距离变粗了，是什么回事？
[解决办法]
增加的元素没套上CSS