大家帮偶优化一下，最好能在3秒内显示出来，谢谢！

偶的目的就是要让所有的INPUT宽度自适应它所在的TD的宽度，用这种方式太慢了，一下子想不到好的办法了，各位帮忙看下有没有更好的方法，最好能在3秒内显示出来1000行，谢谢！

解决方案 »

  1.   

    .INPUTA {width:100%}<input class=INPUTA >
      

  2.   

    孟大，偶是想让IPUNT的宽度跟它所在的TD的宽度一致，如果INPUT里边没有内容用WIDTH：100%会有用，你帮忙看一下我贴的代码吧，INPUT里有值，如果用100%的话会撑开的，不行的。
      

  3.   

    不用INPUT 直接在TD里面写，value 改成innerHTML
      

  4.   

    偶做成INPUT自然是有用的哦，用户需要输入数据的，大家帮忙看看，谢谢！
      

  5.   

    自适应宽度在style里面定义不就可以了么。   document.write("<input type=\"text\" id=\"dgip\" name=\"ip1\" style=\"width:100%\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">");
      

  6.   

    kevin_gao(困了！累了！睡觉了！) ,用style="width:100%"不行的，input里边的值有多长它的WIDTH就会多长，如果比TD的WIDTH小的话是可以，如果多过TD的WIDTH就会撑开了。你可以把那些代码C&P过去试下！谢谢。
      

  7.   

    主要时间花在“把这个一千行的table显示出来”，
    这个时间不能省，
    其它的时间倒时要吧省一些。
    <form>
    <script language="javascript">
     var d = 100;
     var tempTableInnerHtmlStr=new Array();
     var tempArrayLength=0;
     tempTableInnerHtmlStr[tempArrayLength++]="<table width=\"100%\" border=\"1\" id=aaaa>"; for(i=1;i<d;i++)
     {
       tempTableInnerHtmlStr[tempArrayLength++]="<tr>";
       tempTableInnerHtmlStr[tempArrayLength++]="<td id=\"td1\" width=50% >";
       tempTableInnerHtmlStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip1\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/td>";
       tempTableInnerHtmlStr[tempArrayLength++]="<td id=\"td2\" width=20% >";
       tempTableInnerHtmlStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip2\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/td>";
       tempTableInnerHtmlStr[tempArrayLength++]="<td id=\"td3\" width=30% >";
       tempTableInnerHtmlStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip3\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/td>";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/tr>";
     }
     tempTableInnerHtmlStr[tempArrayLength++]="</table>"
     alert(1);
     document.write(tempTableInnerHtmlStr.join(''));
    </script>
    </form>
    <script>
    alert(2)
    var ip1Array=document.getElementsByName('ip1');
    var ip2Array=document.getElementsByName('ip2');
    var ip3Array=document.getElementsByName('ip3');
    var tempWidth1=aaaa.rows[0].cells[0].offsetWidth-4 + 'px'
    var tempWidth2=aaaa.rows[0].cells[1].offsetWidth-4 + 'px'
    var tempWidth3=aaaa.rows[0].cells[2].offsetWidth-4 + 'px'for(i=0;i<ip1Array.length;i++){
    ip1Array[i].style.width = tempWidth1;
    ip2Array[i].style.width = tempWidth2;
    ip3Array[i].style.width = tempWidth3;
    }
    alert(3)
    </script>
      

  8.   

    input里的默认数值先不加不行吗？
    反正按你现在的脚本也要遍历一遍，在上面加上%100，把下面的脚本改下，循环负值，这样我想不会撑开吧？没试过，我去试下，一会回来看
      

  9.   

    <html>
    <head>
    </head>
    <body>
    <form>
    <table width="100%" border="1" id="tb1">
    </table>
    </form>
    </body>
    <script>
    var objTB = document.getElementById("tb1");
    var row;
    var cell;
    var tbody = objTB.childNodes[0];
    objTB.appendChild( tbody );
    for (var i=0; i<100; i++) {
    row = document.createElement( "TR" );
    tbody.appendChild( row );
    for (var j=0; j<3; j++) {
    cell = document.createElement( "TD" );
    switch(j){
    case 0:
    cell.id = "td1" ;
    cell.width = "50%" ;
    cell.innerHTML = "<input type=\"text\" id=\"dgip\" name=\"ip1\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
    break;
    case 1:
    cell.id = "td2" ;
    cell.width = "20%" ;
    cell.innerHTML = "<input type=\"text\" id=\"dgip\" name=\"ip2\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">" ;
    break;
    case 2:
    cell.id = "td3" ;
    cell.width = "30%" ;
    cell.innerHTML = "<input type=\"text\" id=\"dgip\" name=\"ip3\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">" ;
    break;
    }
    row.appendChild( cell );

    }
    }
    </script>
    <script>
    var p = new Array(document.getElementsByTagName('INPUT').length);
    for(i=0;i<p.length;i++){
    document.getElementsByTagName('INPUT')[i].style.width = document.getElementsByTagName('INPUT')[i].parentElement.offsetWidth-4 + 'px';
    }
    </script></html>剩下的你自己來試試看。
      

  10.   

    晕，我那方法不行，后给值也是那么宽，但是我发现大家思路被带复杂了
    根本不用javascript，试下下面的
    <style></style>
    <form>
    <table  border="1" id="table1">
    <script language="javascript">
     var d = 1000;
     for(i=1;i<d;i++)
     {
       document.write("<tr>");
       document.write("<td  id=\"td1\" width=\"100px\">");
       document.write("<input  type=\"text\" id=\"dgip\" name=\"ip1\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">");
       document.write("<\/td>");
       document.write("<td  id=\"td2\" width=\"100px\">");
       document.write("<input  type=\"text\" id=\"dgip\" name=\"ip2\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">");
       document.write("<\/td>");
       document.write("<td  id=\"td3\" width=\"100px\">");
       document.write("<input  type=\"text\" id=\"dgip\" name=\"ip3\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">");
       document.write("<\/td>");
       document.write("<\/tr>");
     }
    </script>
    </table>
    </form>
      

  11.   

    你在调下宽度
    <form>
    <table  border="1" id="table1">
    <script language="javascript">
     var d = 1000;
     for(i=1;i<d;i++)
     {
       document.write("<tr>");
       document.write("<td  id=\"td1\" width=\"500px\">");
       document.write("<input  style=\"width:500px\" type=\"text\" id=\"dgip\" name=\"ip1\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">");
       document.write("<\/td>");
       document.write("<td  style=\"width:200px\"id=\"td2\" width=\"200px\">");
       document.write("<input style=\"width:200px\" type=\"text\" id=\"dgip\" name=\"ip2\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">");
       document.write("<\/td>");
       document.write("<td  id=\"td3\" width=\"300px\">");
       document.write("<input  style=\"width:300px\" type=\"text\" id=\"dgip\" name=\"ip3\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">");
       document.write("<\/td>");
       document.write("<\/tr>");
     }
    </script>
    </table>
    </form>
      

  12.   

    fantiny你的稍微改一下也可以，不过只使用于已知固定宽度的情况。
      

  13.   

    var d = 1000;
     var s = "";
     for(i=1;i<d;i++)
     {
        s += ".........<\/td><\/tr>";
     }
     document.write(s);用这种方式应该是比较快的一种方式，一般 1.5 秒可以完成这一步
      

  14.   

    tbody.appendChild
    document.createElement
    这种模式可能是最慢的一种
      

  15.   

    JK 的数组join()是最快的一种解决方式了，第一步 0.25 秒，第二步 4 秒
      

  16.   

    偶觉得要是能不用通过指定Name也能达到那么快就好了，可能真的鱼和熊掌不能兼得！
      

  17.   

    在JK的基础上再优化一下，不用 name:<form>
    <script language="javascript">
    document.write(new Date().getTime() +"<br>");
     var d = 1000;
     var tempTableInnerHtmlStr=new Array();
     var tempArrayLength=0;
     tempTableInnerHtmlStr[tempArrayLength++]="<table width=\"100%\" border=\"1\" id=aaaa>"; for(i=1;i<d;i++)
     {
       tempTableInnerHtmlStr[tempArrayLength++]="<tr>";
       tempTableInnerHtmlStr[tempArrayLength++]="<td id=\"td1\" width=50% >";
       tempTableInnerHtmlStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip1\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/td>";
       tempTableInnerHtmlStr[tempArrayLength++]="<td id=\"td2\" width=20% >";
       tempTableInnerHtmlStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip2\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/td>";
       tempTableInnerHtmlStr[tempArrayLength++]="<td id=\"td3\" width=30% >";
       tempTableInnerHtmlStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip3\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/td>";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/tr>";
     }
     tempTableInnerHtmlStr[tempArrayLength++]="</table>"
     //alert(1);
     document.write(tempTableInnerHtmlStr.join(''));
    document.write(new Date().getTime() +"<br>");
    </script>
    </form>
    <script>
    //alert(2)
    var tempWidth1=aaaa.rows[0].cells[0].offsetWidth-4 + 'px';
    var tempWidth2=aaaa.rows[0].cells[1].offsetWidth-4 + 'px';
    var tempWidth3=aaaa.rows[0].cells[2].offsetWidth-4 + 'px';
    var trs = aaaa.getElementsByTagName("TR");for(i=0;i<trs.length;i++){
    trs[i].cells[0].childNodes[0].style.width = tempWidth1;
    trs[i].cells[1].childNodes[0].style.width = tempWidth2;
    trs[i].cells[2].childNodes[0].style.width = tempWidth3;
    }
    document.write(new Date().getTime() +"<br>");
    //alert(3)
    </script>
      

  18.   

    我的这个按JK的方式改了
    <form>
    <script language="javascript">
     var d = 20;
     var str=new Array();
     Strlength=0;
     str[Strlength++]="<table  width=\"100%\" border=\"1\" id=\"table1\" >";
     for(i=1;i<d;i++)
     {
       str[Strlength++]="<tr>";
       str[Strlength++]="<td  id=\"td1\" width=\"450px\">";
       str[Strlength++]="<input  style=\"width:454px\" type=\"text\" id=\"dgip\" name=\"ip1\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       str[Strlength++]="<\/td>";
       str[Strlength++]="<td  style=\"width:200px\"id=\"td2\" width=\"200px\">";
       str[Strlength++]="<input style=\"width:204px\" type=\"text\" id=\"dgip\" name=\"ip2\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       str[Strlength++]="<\/td>";
       str[Strlength++]="<td  id=\"td3\" width=\"300px\">";
       str[Strlength++]="<input  style=\"width:304px\" type=\"text\" id=\"dgip\" name=\"ip3\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       str[Strlength++]="<\/td>";
       str[Strlength++]="<\/tr>";
       
     }
     str[Strlength++]="</table>";
     document.write(str.join(''));
    </script>
    </form>
      

  19.   

    梅大的差不多了，终于松了口气，呼!!!
    小小的改了下，不固定表格列：
    var tds = aaaa.rows[0].cells.length;
    for(d=0;d<tds;d++){
    var tempWidth = aaaa.rows[0].cells[d].offsetWidth-4 + 'px';
    var trs = aaaa.getElementsByTagName("TR");
    for(i=0;i<trs.length;i++)
    {
    trs[i].cells[d].childNodes[0].style.width = tempWidth;
    }
    }
      

  20.   

    不要呼了，你在 for 里再套用 for 效率有折扣的，且 for 里的语句越少越好，所以 tempWidth 还是放到循环外面吧。
      

  21.   

    哦？那整个过程如何实现呢？好象一定要有个for的哦。
      

  22.   

    var tds = aaaa.rows[0].cells.length;
    var tdw = [];
    for(var i=0; i<tds; i++)
    {
      tdw[tdw.length] = aaaa.rows[0].cells[i].offsetWidth - 4;
    }var trs = aaaa.getElementsByTagName("TR");
    for(var i=0; i<trs.length; i++)
    {
      for(var d=0; d<tds; d++)
      {
        trs[i].cells[d].childNodes[0].style.width = tdw[d];
      }
    }
      

  23.   

    用这一种吧，估计是最快的了，
    table 的：style="table-layout:fixed"
    配合input 的 style="width:100%"
    也同样能满足楼主的要求
    <form>
    <script language="javascript">
     document.write(new Date()+"<br>");
     var d = 100;
     var tempTableInnerHtmlStr=new Array();
     var tempArrayLength=0;
     tempTableInnerHtmlStr[tempArrayLength++]="<table width=\"100%\" border=\"1\" id=aaaa STYLE=\"table-layout:fixed\">"; for(i=1;i<d;i++)
     {
       tempTableInnerHtmlStr[tempArrayLength++]="<tr>";
       tempTableInnerHtmlStr[tempArrayLength++]="<td id=\"td1\" width=50% >";
       tempTableInnerHtmlStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip1\" style=\"width:100%\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/td>";
       tempTableInnerHtmlStr[tempArrayLength++]="<td id=\"td2\" width=20% >";
       tempTableInnerHtmlStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip2\" style=\"width:100%\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/td>";
       tempTableInnerHtmlStr[tempArrayLength++]="<td id=\"td3\" width=30% >";
       tempTableInnerHtmlStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip3\" style=\"width:100%\" value=\"aljshldfkjhqdkasdfasahsldkjfhlkajsdhlkfjahlksdjfhklajsdhlkfjahlksdjfladfqwerqwzxcvqwefj\">";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/td>";
       tempTableInnerHtmlStr[tempArrayLength++]="<\/tr>";
     }
     tempTableInnerHtmlStr[tempArrayLength++]="</table>"
     document.write(new Date()+"<br>");
     document.write(tempTableInnerHtmlStr.join(''));
     
    </script>
    </form>
      

  24.   

    这样太强了，怎么你知道哪个样式的？景仰ing... ^_^
      

  25.   

    fantiny(虽然我是菜鸟，不过我是~~非暴力不合作~~的菜鸟) 的方法，效率很低，100行的时候看起来很快，改成1000行，运行了大约2分钟，而且，CPU达到了100%，不可取。试试下面的方法。