HTML 元素宽度自适应问题

测试成功，没有问题，给分<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Test </title> 
    <script type="text/javascript">
     window.onload=function()
{
var sel=document.body.getElementsByTagName("select");
var k=0;
for(i=0;i<sel.length;i++)
{
for(j=i;j<sel.length;j++)
{
k=i;
if(sel[k].offsetWidth<sel[j].offsetWidth)
{
k=j;
}
}
sel[i].style.width=sel[k].offsetWidth+"px";
}
}
    </script>
</head> 
<body> 
<table border="1"> 
<tr> 
    <td> 
        <select id="sel1"> 
            <option>1 </option> 
            <option>2 </option> 
            <option>3 </option> 
            <option>4 </option> 
        </select> 
    </td> 
</tr> 
<tr> 
    <td> 
        <select id="sel2"> 
            <option>11111 </option> 
            <option>22222 </option> 
            <option>33333 </option> 
            <option>44444 </option> 
        </select> 
    </td> 
</tr> 
<tr> 
    <td> 
        <select id="sel3"> 
            <option>11111111111111 </option> 
            <option>22222222222222222222222222</option> 
            <option>33333333333333 </option> 
            <option>44444444444444 </option> 
        </select> 
    </td> 
</tr> 
</table> 
</body> 
</html>

解决方案 »

  1.   

    ??
    td没有设置width 就是你说的要求呀？ 
    没有听明白？ 你说的是三列要一样宽吗？
     
      

  2.   

    To atmo :
    是不是只能用循环？有没有其它的方法？因为我的页面里可能会有上百个这样的<select>，如果循环，怕影响效率
    To luojihaidao:
    我的需求是要把三个<select>的宽度都设为一样宽，大小就为三个<select>中最大的那个<select>的宽度。
      

  3.   

    没有办法，用css控制无法知道哪个最大，不用js无法给每一个定义宽度，不过循环的代码是可以优化的，优化代码把效率提升到最高也许是最好的办法
      

  4.   

            window.onload=function()
            {
                var sel=document.body.getElementsByTagName("select");
                var w=0;
                for(i=0;i<sel.length;i++)
                {
                    if(w<sel[i].offsetWidth) w=sel[i].offsetWidth;
                }
                var wpx = w+"px";
                for(i=i;i<sel.length;i++)
                {
                    sel[i].offsetWidth=wpx;
                }
            }
      

  5.   

    这样也可以<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head> 
        <title>Test </title> 
        <script type="text/javascript">
         window.onload=function()
    {
    var sel=document.body.getElementsByTagName("select");
    var k=0;
    a=new Array();
    for(i=0;i<sel.length;i++)
    {
    a[i]=sel[i].offsetWidth;
    }
    var maxValue=a.sort(sortNumber)[a.length-1]
    for(i=0;i<sel.length;i++)
    {
    sel[i].style.width=maxValue+"px";
    }
    }
    function sortNumber(a,b)
    {
    return a - b
    }
        </script>
    </head> 
    <body> 
    <table border="1"> 
    <tr> 
        <td> 
            <select id="sel1"> 
                <option>1 </option> 
                <option>2 </option> 
                <option>3 </option> 
                <option>4 </option> 
            </select> 
        </td> 
    </tr> 
    <tr> 
        <td> 
            <select id="sel2"> 
                <option>11111 </option> 
                <option>22222 </option> 
                <option>333330000000000000000000000000 </option> 
                <option>44444 </option> 
            </select> 
        </td> 
    </tr> 
    <tr> 
        <td> 
            <select id="sel3"> 
                <option>111111s111 </option> 
                <option>22222d</option> 
                <option>33d3333333 </option> 
                <option>4444d444444 </option> 
            </select> 
        </td> 
    </tr> 
    </table> 
    </body> 
    </html>
      

  6.   

    只判断同一行的不同列找到最大的值， 同时给 selecet　style="width:100%" 就可以了，　不用找Select　找td 比较大小，　第一行就OK 
      

  7.   

    有没有什么可以靠css style控制的方法？做循环速度太慢了。
      

  8.   

    有没有什么可以靠css style控制的方法？做循环速度太慢了。
      

  9.   

    对AJAX有兴趣的朋友，欢迎加入群78514534
    对ASP.NET和C#有兴趣的朋友，欢迎加入67226009
      

  10.   

        <script type="text/javascript">
            window.onload=function()
            {
                var sel=document.body.getElementsByTagName("select");
                var k=0;
                a=new Array();
                for(i=0;i<sel.length;i++)
                {    
                    a[i]=sel[i].offsetWidth;
                }
                var maxValue=a.sort(sortNumber)[a.length-1]
                for(i=0;i<sel.length;i++)
                {    
                    sel[i].style.width=maxValue+"px";
                }
            }            
            function sortNumber(a,b)
            {
                return a - b
            }
        </script>当我有上百个<select>的时候，用这种循环特别的慢，要几分钟.....
    上面主要这个方法慢
              for(i=0;i<sel.length;i++)
                {    
                    sel[i].style.width=maxValue+"px";
                }
    给hmtl元素设置style的时候，循环速度非常慢.