获取table高度问题

问题是这样的，页面上我有一组表格紧挨在一起，即他们的float:left;他们的行数是一样的，但是有些行高是不一样的，即他们的tr高度不同，页面很不协调，于是我写了个函数，统一了他们各行的高度，在静态页面我没有显式的写<tr height="20">,只写了<tr>.但是js获取到了tr的高度，并可以修改他的高度。
接着，我把这些表格全部存进了数据库，用的是clob类型，再取出来，写在页面，这时候，表格可以征程显示，但是表格的tr高度获取不到了，他的offsetHeight和clientHeight都可以获取到，但是height却获取不到，对他们进行修改的时候也不成功，比如，我在js里对某一行修改高度，xx.height = 80;这样是修改不了的，但是在静态页面是可以的啊，为什么呢？希望高手们指点一下小弟，谢谢啦

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

L@_@K
<!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> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
</head> <body>
  <table border=1>
<tr id="tr1">
<td>123</td>
<td></td>
<td></td>
</tr>
<tr>
<td>321</td>
<td></td>
<td></td>
</tr>
  </table>
  <script type="text/javascript">
  
  </script>
</body>
</html>
lz 把再次写到页面的 html 代码贴出来看看！
你可以这样做
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <META http-equiv="Content-Style-Type" content="text/css">
    </head>
    <script language=javascript>
        window.onload=function(){
            var tb=document.getElementById("tb");
            var rows=tb.rows.length;
            for(var i=0;i<rows;i++){
                tb.rows[i].style.height=30;  //在这里修改
            }
        }
        function getHeight(){
            var heights=[]
            var tb=document.getElementById("tb");
            var rows=tb.rows.length;
            for(var i=0;i<rows;i++){
               heights[i]= parseInt(tb.rows[i].style.height);  //在这里修改
            }
            alert(heights);
        }
    </script>
    <body >
        <table id="tb" border=1px gray>
            <tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
            <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
            <tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
            <tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr>
            <tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td></tr>
        </table>
        <input type="button" value="得到宽度数组" onclick="getHeight()">
    </body>
</html>
注意点:一定要在加载完页面以后才能修改或者得到表格宽度
可能是加载顺序问题，和float关系不大吧<script>
window.onload=function(){
var tbl = document.getElementById("tb");
var n = 0;
var a = tbl.getElementsByTagName("tr");
for(var i=0;i<a.length;i++){
  if(a[i].clientHeight>n) n=a[i].clientHeight;
}
for(var i=0;i<a.length;i++){
  a[i].style.height = n;
}
}
</script>
<table id="tb" style="float:left">
<tr>
<td>dfsfsfs<br>asdasda<br>ss</td>
</tr>
<tr>
<td>ss</td>
</tr>
<tr>
<td>dfsfsfs<br>asdasda<br>ss</td>
</tr>
</table>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><style>
table{float:left;border-collapse:collapse;border:#bbb;}
table td{word-break:break-all;height:20px;font-size:13px;border:#bbb;}
</style>
</head>
<body>
<script>
function doTable(){
var pp = document.getElementById("pp");
var d = pp.outerHTML;
//alert(d);
document.body.innerHTML="";
document.write(d);

var tab = document.getElementsByTagName("table");
var index = tab.length;
var rIndex = tab[1].rows.length
var rowArray = new Array(rIndex);
for(var i=0;i<rIndex;i=i+1){
var tdArray = new Array();
for(var j=1;j<index;j=j+1){
tdArray[j-1] = tab.item(j).rows[i].clientHeight;
}
var maxs = tdArray[0];
for(var k=0;k<tdArray.length;k=k+1){

if(maxs<tdArray[k]){
maxs = tdArray[k];
}
rowArray[i] = maxs;
}

}

for(var i=0;i<rIndex;i=i+1){
for(var j=1;j<index;j=j+1){
//tab.item(j).rows[i].offsetHeight = rowArray[i];
//tab.item(j).rows[i].clientHeight = rowArray[i];
//tab.item(j).rows[i].height = rowArray[i];
}
}
}
doTable();</script>
</body>
</html>不需要看那几个table的内容，就是几个行数一样的table ,但是在jsp里，我把这几个table 的内容存进数据库，然后在取出来，
tab.item(j).rows[i].height = rowArray[i];//在这里修改高度
这一行就没效果了，试了下，是因为获取不到height的值，
改成tab.item(j).rows[i].style.height = rowArray[i];//在这里修改高度
这次可以获取style.height的值，可是依旧修改不了，
你要把css里
table td{word-break:break-all;height:20px;font-size:13px;border:#bbb;}
那个height:20px去掉因为如果css类定义了,你要修改高度的话必须修改css类里的,修改页面的没用
跟float没有关系
支持 3 楼
楼上，可是我修改xx.style.height总可以吧,css也是可以修改的
当然,你也可以直接修改定义好的css属性function changeHeight(){
  var cssrules=document.styleSheets[0].cssRules|| document.styleSheets[0].rules;
  cssrules[1].style. height=xxx//你自己的height
}
你页面定义的<style>属性在dom里面直接得到节点的height是修改不了的,这个问题的遇到过,css类里定义的必须在css类里修改,可以理解为css类和节点里的css是分开的且css类属性强于节点
beenz,呵呵，谢谢啊，无意中搞定了，哈哈哈哈，还是很谢谢你！
你把css类里的height注释掉,再看看修改
或者直接修改css类看看,前提是你数据库得到的height是有值的
问题应该出在这几句上！
    var pp = document.getElementById("pp");
    var d = pp.outerHTML;
    //alert(d);
    document.body.innerHTML="";
    document.write(d);
以下代码一切正常
L@_@K
<!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> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
table {
float:left;
border-collapse:collapse;
border:#bbb;
}
table td {
word-break:break-all;
height:20px;
font-size:13px;
border:#bbb;
}
  </style>
</head> <body>
  <table border=1>
<tr>
<td>t1</td>
<td>abc</td>
<td>ddd</td>
</tr>
<tr>
<td>321</td>
<td>afdad</td>
<td>afa</td>
</tr>
  </table>
  <table border=1>
<tr id="tr1">
<td>t2</td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>321</td>
<td>333</td>
<td>555</td>
</tr>
  </table>
  <table border=3>
<tr id="tr1">
<td>t2</td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>321</td>
<td>333</td>
<td>555</td>
</tr>
  </table>
  <script type="text/javascript">
  
  </script>
</body>
</html>