js高手：如何实现新增单元格自动换行显示。并没有增加<tr>?

不可能吧  那样就不叫TR TD了
你可以一个TR一个TD 然后里面全用DIV
要不干脆都改成DIV

解决方案 »

  1.   

    parentElement.insertBefore( newElement , targetElement );
    用这个方法加到前面吧
    newElement :新元素
    targetElement :目标元素至于5行换一次的我想应该是获取tr的innerHTML往第５个td处加上　"\n" 这个换行符应该就可以了
    取几个应该很容易了 childNodes.length 即可呵`LZ参考一下,我的想法而已``
      

  2.   

    EN,
    楼主很有想法。
    3楼的朋友关于\n的想法也很有创意。
      

  3.   

    你要求的效果是不是:一个<TR>里的<TD>,要显示成两行或多行?可以知道你为什么需要达到这样的效果吗?我觉得你的要求很难实现,或许在知道你的真正需求之后,大家可以提供你更好而且更的解决方案.
      

  4.   

    变通一下嘛,为何非要故捣弄呢?这样不就得了
    <tr> 
        <table>
            <tr>
                <td id="td6">6 <td> <td id="td5">5 </td> <td id="td4">4 </td> <td id="td3">3 </td> <td id="td2">2 </td> 
            </tr>
            <tr>
                <td id="td1">1 </td>
            </tr>
        <table>
    </tr>
      

  5.   

    否则要想实现自动换行功能还可以这样:
    <style>
        span{
            display:inline-block;
            width:20px;
            overflow:hidden;
            position:relative;
            border:1px solid #97C6E1;
        }
    </style>
    <table border="1" width="114" style="float:left;border-collapse:collapse;border-color:red;">
        <tr> 
            <td>
                <span>6</span><span>5</span><span>4</span><span>3</span><span>2</span><span>1</span>
            </td>
        </tr>
    </table>
      

  6.   

    否则要想实现自动换行功能还可以这样:
    <style>
        span{
            display:inline-block;
            width:20px;
            overflow:hidden;
            position:relative;
            border:1px solid #97C6E1;
        }
    </style>
    <table border="1" width="114" style="float:left;border-collapse:collapse;border-color:red;">
        <tr> 
            <td>
                <span>6</span><span>5</span><span>4</span><span>3</span><span>2</span><span>1</span>
            </td>
        </tr>
    </table>
      

  7.   

    darkfox123,你好，
    你写的代码可以实现我要的功能。不过，
    如何才能用js添加一个<span id="7"></span>或减少一个呢？
      

  8.   

    <style> 
        span{ 
            display:inline-block; 
            width:20px; 
            overflow:hidden; 
            position:relative; 
            border:1px solid #97C6E1; 
        } 
    </style> 
    <table border="1" width="114" style="float:left;border-collapse:collapse;border-color:red;"> 
        <tr id="tr1"> 
            <td id="td1"> 
                <span id="6">6 </span id="5"> <span>5 </span id="4"><span id="3">4 </span> <span id="3">3 </span> <span id="12>2 </span> <span id="1">1 </span> 
            </td> 
        </tr> 
    </table>
    darkfox123,你好， 
    你写的代码可以实现我要的功能。不过，像上面的形式 
    如何才能用js添加一个 <span id="7">7</span>或减少其中一个呢？
      

  9.   

    技术问题不是问题，JS可以做出你想要的效果，不过有些麻烦，需要一个很好的算法。
    楼主可以写一个通用的JS类来实现。
      

  10.   

    用jquery写个，不是很难的啊！
      

  11.   

    <style> 
        div{ 
    float:left; 
    width:21px;
    margin-left:2px;
    margin-top:2px;
    padding:0px;
        border:1px solid #97C6E1; 
    border-collapse:collapse;
        } 
    </style> 
    <table width="100" border="0"cellpadding="0" cellspacing="0"  style="border:1px solid #97C6E1;"> 
        <tr> 
            <td id="div"> 
                <div>6</div><div>5</div><div>4 </div><div>3 </div><div>2</div><div>1</div> 
            </td> 
        </tr> 
    </table>
    <div onclick="add()">增加</div><div onclick="set()">减少</div>
    <script>
    function add(){
    var addid=document.getElementById("div");
    var adddiv=addid.getElementsByTagName("div");
    var i=adddiv.length+1;
    addid.innerHTML="<div>"+i+"</div>"+addid.innerHTML;
    }
    function set(){
    var setid=document.getElementById("div");
    var adddiv=addid.getElementsByTagName("div");
    //这里自己弄，我给你思路
    }
    </script>
      

  12.   


    <html>
    <head>
    <script type="text/javascript">
    function $(id)
    {
    return document.getElementById(id);
    } function add(content,rowIndex)
    {
    var tdLength=$("table1").rows[rowIndex].getElementsByTagName("TD").length;
    var oTd=document.createElement("td");
    oTd.style.verticalAlign="top";
    oTd.appendChild(content);
    if(tdLength<4)
    {
    $("table1").rows[rowIndex].appendChild(oTd);
    }
    else if(tdLength==4)
    {
    $("table1").rows[rowIndex].insertBefore(oTd,$("table1").rows[rowIndex].childNodes[0]);
    }
    else
    {
    var oDiv=document.createElement("div");
    oDiv.appendChild(content);
    $("table1").rows[rowIndex].childNodes[0].appendChild(oDiv);
    }
    }
    </script>
    </head>
    <body>
    <table id="table1" style="width:100%;height:30px; border:1px solid #000000;">
    <tr>
    </tr>
    </table>
    <div><span id="span1">13123123</span><input type="button" onclick="add($('span1'),0);this.style.display='none';" value="add to table"></div>
    <div><span id="span2">53453453345</span><input type="button" onclick="add($('span2'),0);this.style.display='none';" value="add to table"></div>
    <div><span id="span3">asdfsadf</span><input type="button" onclick="add($('span3'),0);this.style.display='none';" value="add to table"></div>
    <div><span id="span4">asiuiiusadfu</span><input type="button" onclick="add($('span4'),0);this.style.display='none';" value="add to table"></div>
    <div><span id="span5">1cccccccc</span><input type="button" onclick="add($('span5'),0);this.style.display='none';" value="add to table"></div>
    <div><span id="span6">0000000</span><input type="button" onclick="add($('span6'),0);this.style.display='none';" value="add to table"></div>
    </body>
    </html>
    大概意思，可以自己再封装下
      

  13.   

    <style> 
        span{ 
            display:inline-block; 
            width:25px; 
            overflow:hidden; 
            position:relative; 
            border:1px solid #97C6E1; 
    } 
    </style> 
    <input type="button" value="addSpan" onclick="addSpan();">
    <input type="button" value="reduceSpan" onclick="reduceSpan();">
    <table border="1"  width="130" style="float:left;border-collapse:collapse;border-color:red;"> 
        <tr> 
            <td id="changeColumn"> 
               <span>7 </span> <span>6 </span> <span>5 </span> <span>4 </span> <span>3 </span> <span>2 </span> <span>1 </span> 
            </td> 
        </tr> 
    </table>
    function addSpan()
    {
    var i=$("#changeColumn").find("span").eq(0).text();
    i=parseInt(i,10)+1;
    $("#changeColumn").prepend("<span>"+i+"</span>");
    }
    function reduceSpan()
    {
    $("#changeColumn").find("span").eq(0).remove();
    }
      

  14.   

    <style> 
        div{ 
    float:left; 
    width:40px;
    margin-left:6px;
    margin-top:2px;
    padding:0px;
        border:1px solid #97C6E1; 
    border-collapse:collapse;
        } 
    </style> 
    <table width="160" border="0"cellpadding="0" cellspacing="0"  style="border:1px solid #97C6E1;"> 
        <tr> 
            <td id="div"> 
                <div>6</div><div>5</div><div>4 </div><div>3 </div><div>2</div><div>1</div> 
            </td> 
        </tr> 
    </table>
    <div onclick="add()">增加</div><div onclick="set()">减少</div>
    <script>
    function add(){
    var addid=document.getElementById("div");
    var adddiv=addid.getElementsByTagName("div");
    var i=adddiv.length+1;
    addid.innerHTML="<div>"+i+"</div>"+addid.innerHTML;
    }
    function set(){
    var setid=document.getElementById("div");
    var setdiv=setid.getElementsByTagName("div");
    if(setdiv.length>0)setid.removeChild(setdiv[0])
    }
    </script>
      

  15.   

    <style> 
        span{ 
            display:inline-block; 
            width:20px; 
            overflow:hidden; 
            position:relative; 
            border:1px solid #97C6E1; 
        } 
    </style> 
    <table border="1" width="114" style="float:left;border-collapse:collapse;border-color:red;"> 
        <tr> 
            <td id="td1" >
                <span>6 </span> <span>5 </span> <span>4 </span> <span>3 </span> <span>2 </span> <span>1 </span> 
            </td> 
        </tr> 
    </table>
    <input type="button" value="+" onclick="onchild(1)" /><input type="button" value="-" onclick="onchild(2)"/>
    <script>function onchild(op)
    {
        var idx   = 0; 
        var otd   = document.getElementById( "td1" );
        var onods = otd.getElementsByTagName("SPAN");
        if( onods.length )
        {
            if( op== 2 )
                otd.removeChild( onods.item( idx ) );
            else if( op== 1 )
            {
                var newSpan = document.createElement( "SPAN" );
                otd.insertBefore( newSpan, onods.item(0) );
                newSpan.innerHTML = onods.length;
            }
        }
        else if( op== 1 )
        {
            var newSpan = document.createElement( "SPAN" );
            otd.appendChild( newSpan );
            newSpan.innerHTML = 1;
        }
    }
    </script>