javascript问题 计算列宽

<HTML>
<HEAD><Title>Test For Font Change</Title>
</HEAD>
<Body>
<Table border=1>
<Tr>
<Td ID="MyTD1">Test For Font Change</Td>
<Td ID="MyTD2">Test For Font Change</Td>
</Tr>
</Table>
改变浏览器的字体(View->Text Size->)后按GetLength按钮,返回MyTD1的宽度.
<Input type=button value="GetLength" onclick="getMyLength()">
<Script language=javascript>
function getMyLength()
{
alert(MyTD1.clientWidth);
}
</Script>
</Body>
</HTML>

解决方案 »

  1.   

    我只想在ie在改变完字体后，能自动触发这个事件，而不是点击去触发事件事件。因为我想要的功能是：
         一个数据表上面的title，通过一个层把它fix，使user一直能看到title，而且保持每列不折行，可以任意改变字体大小。我现在只能保持数据表实现这些功能，上面浮动的层不能很好设置宽度，对应相应的列。
       3x in advance！
      

  2.   

    我本身就是像excel数据表，现在是想固定title的一行数据。
      国外是有一个产品作的类似excel，可以fix。
      我要的功能还有sort（单列或者多列）
      

  3.   

    我想，对td的宽度定义为百分比宽度，并设置nowrap，整个表格的宽度为100%，这样的话，应该就可以了。
      

  4.   

    我没有办法来分配这个百分比，html文件是自动生成的，列数也不固定，列宽也不固定。
      

  5.   

    ie5以上支持：
    <span style="text-align=center;width:expression(otd.offsetWidth)">标题</span>
    <table border=1><tr><td id=otd>文字文字文字文字文字</td></tr></table>
      

  6.   

    假如在数据表某列加过nowrap标记后，如何还能让这列数据折行？
      
      Example：
      <table border=1  width="100%" id=test>  
       <tr>
            <td nowrap><DIV style="WIDTH: 18px">test</div></td>
         </tr>
      这种方法是不行
       test.rows[0].cells[0].childNodes.item(0).style.width=30;
      设置大于test宽度的是可以的。
      

  7.   

    假如在数据表某列加过nowrap标记后，如何还能让这列数据折行？
      
      Example：
      <table border=1  width="100%" id=test>  
       <tr>
            <td nowrap><DIV style="WIDTH: 18px">test</div></td>
         </tr>
      这种方法是不行
       test.rows[0].cells[0].childNodes.item(0).style.width=3;
      设置大于test宽度的是不可以的。
      

  8.   

    你的代码改成这样：
    <BODY>
     <table border=1  width="100%" id=test>  
       <tr>
            <td nowrap width=100><DIV style="WIDTH: 60px">t e s t</div></td>
         </tr>
     </table><button onclick="alert(test.rows[0].cells[0].childNodes.item(0).style.width = 3)">button</button>
    </BODY>就没问题了。注意三点。
    (1).你的例子永远不可能折行。因为你的test是一个单词，不可能把一个单词折成两行。你应该写成：t e s t .
    (2) 你必须在 <td nowrap 里面加一个缺省的width值.否则里面的宽度改变没影响。
    （3）我觉得nowrap就从来没什么作用.(我觉得)
      

  9.   

    假如我采用这样的方式
    <BODY>
     <table border=1  width="100%" id=test>  
       <tr>
            <td> <nobr><DIV style="WIDTH: 30px">titleA</div>
                  </nobr>
            </td>
            <td> <nobr><DIV style="WIDTH: 30px">titleB</div>
                  </nobr>
            </td>
        </tr>
         <tr>
            <td> <nobr><DIV style="WIDTH: 30px">te  st</div>
                  </nobr>
            </td>
            <td> <nobr><DIV style="WIDTH: 30px">test</div>
                  </nobr>
            </td>
        </tr>    
     </table>
    </BODY>
      让titleA折行，titleB不折行。有没有什么好的办法。倘若把<nobr></nobr>这个节点删去，remove如何写？
      

  10.   

    <BODY>
     <table border=1  width="100%" id=test>  
       <tr>
            <td> <nobr><DIV style="WIDTH: 30px">titleA</div>
                  </nobr>
            </td>
            <td> <nobr><DIV style="WIDTH: 30px">titleB</div>
                  </nobr>
            </td>
        </tr>
         <tr>
            <td id=theTD> <nobr><DIV style="WIDTH: 30px">te  st</div>
                  </nobr>
            </td>
            <td> <nobr><DIV style="WIDTH: 30px">test</div>
                  </nobr>
            </td>
        </tr>    
     </table>
     <br></br>
     <button onclick="theTD.innerHTML=theTD.innerHTML.replace(/<nobr>/i,'').replace(/<\/nobr>/i,'')">titleA 折行</button>
    </BODY>如果要批量折行可用item集合。其实我觉得你最好不要用<nobr>,他和style.width冲突。
      

  11.   

    不错确实重复且冲突，但在数据表的上边需固定title，我是采用层的办法，浮在上面。当浏览器的字体改变时，列宽发生变化，我需要修改浮动层的列宽，所以这样做啦。
      item我没有用过，最好能举个例子或者给些帮助文档，very thanks！
      

  12.   

    上面的clientWidth可以呀，还有scrollWidth在这里也可以，或者干脆加上
    style=";text-overflow:ellipsis"显示不下就用...代替
      

  13.   

    HI！lanbor
      如何把<td>替换成其它的。
      如：
        <td> test</td>
        替换为
        <td nowrap> test</td>
      

  14.   

    我还是不是很理解你的意思。对于你想固定title的宽度，如果通过了层来fix,就不需要用nowrap了。用了nowarp就不要用层了。你给表加上style:font-size:12px/14px/16px之类的css固定字体大小，你就根本不用考虑ie字体大小的影响。(不要用9pt之类的)至于item,比如item('theId').可以得到窗口里所有的id为theId的元素(tag)。这样你就可以把你所有需要处理的所有td,取相同的id,然后一次处理.至于<td>test</td>替换为<td nowrap>text</td>,你可以通过设置他的外层元素的innerHTML来控制.比如:<tr id=myTr><td>test</td></tr>你可以设置myTr.innrHTML为<td nowrap>test</td>.唉.总之不理解你要实现的功能,可能根本没必要搞得这么复杂.
      

  15.   

    haha!我要的功能是复杂的。
    1.保持有漂浮的层。2.可以任意设置字体大小，且字体能发生变化。
    3.部分数据需要不折行（如：大于400px的折行），部分需要折行。关于td的替换。<tr>下面有多个td，而我只需替换其中的一个或者多个。
      <tr>
            <td> <nobr>te  st</nobr>
            </td>
            <td> <nobr>test</nobr>
            </td>
            <td> <nobr>test nowrap</nobr>
            </td>
        </tr>
      

  16.   

    <BODY>
    <table border=1>
     <tr>
      <td width=10 id=needNobrCtr width=10> <nobr>te  st</nobr></td>
      <td width=10><nobr>就 我 不 折 行</nobr></td>
      <td width=10 id=needNobrCtr> <nobr>test nowrap</nobr></td>
      <td width=10 id=needNobrCtr> <nobr>test nowrap</nobr></td>
     </tr>
    </table>
    <br><br><script language=javascript>
    function clearNobr(sId) {
       var aItem = document.all.item(sId);
       for (var i= 0; i < aItem.length; i++)
        aItem(i).innerHTML = aItem(i).innerHTML.replace(/<nobr>/i,'').replace(/<\/nobr>/i,'');
    }function addNobr(sId) {
      var aItem = document.all.item(sId);
      for (var i= 0; i < aItem.length; i++)
        aItem(i).innerHTML = aItem(i).innerHTML.replace(/(.+)/i,'<nobr>$1<\/nobr>')
    }
    </script>
    <button onclick="clearNobr('needNobrCtr')">折行</button>&nbsp;&nbsp;
    <button onclick="addNobr('needNobrCtr')">不折行</button>
    </BODY>
      

  17.   

    假如那天选版主，我投你一票：）
      还有更不错的方法，把clearNobr函数下的
      aItem(i).innerHTML  =  aItem(i).innerHTML.replace(/<nobr>/i,'').replace(/  <\/nobr  >/i,'');  
      该为
       aItem(i).innerHTML  =  aItem(i).innerHTML.replace(/<nobr>/i,"<div style=\"nowrap width:10px\">").replace(/<\/nobr  >/i,"<\/div>");
       它的好处，可以任意设置列宽，且不折行。
       thanks！