row显示和隐藏！

function AddRow()
{
var oTable = document.getElementById("table id");
var iRowCount = oTable.rows.length;

for(var i=0 ; i<iRowCount ; i++)
{
if(oTable.rows[i].style.display == "none")
{
oTable.rows[i].style.display = "";
break;
}
}
}

function DelRow()
{
var oTable = document.getElementById("table id");
var iRowCount = oTable.rows.length;

for(var i=0 ; i<iRowCount ; i++)
{
if(oTable.rows[i].style.display == "none")
{
oTable.rows[i-1].style.display = "none";
break;
}
}
}

解决方案 »

  1.   

    楼上的朋友，你的js里面的break;让我的tr显示不出来
      

  2.   

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test</title>
    </head>
    <body>
        <div>
            <table id="tbl1" border="1" style="width: 30%;">
                <tr onclick="rowObj=this">
                    <td>
                        Hello
                    </td>
                </tr>
                <tr onclick="rowObj=this">
                    <td>
                        Hello
                    </td>
                </tr>
                <tr onclick="rowObj=this">
                    <td>
                        Hello
                    </td>
                </tr>
                <tr onclick="rowObj=this">
                    <td>
                        Hello
                    </td>
                </tr>
                <tr onclick="rowObj=this">
                    <td>
                        Hello
                    </td>
                </tr>
                <tr onclick="rowObj=this">
                    <td>
                        Hello
                    </td>
                </tr>
            </table>
            <hr />
            <input type="button" value="add Row" onclick="addRow()" />
            <br />点击行，再点remove
            <input type="button" value="Remove Row" onclick="RemoveRow()" />
        </div>
    </body>
    </html><script type="text/javascript">
    var rowObj=null;
    function addRow()
    {
        var tbl=document.getElementById('tbl1');
       var r= tbl.insertRow(0);
       var c=r.insertCell(0);
       c.innerHTML='world';
       
    }
    function RemoveRow()
    {
        if(rowObj==null) return;
        
        document.getElementById('tbl1').firstChild.removeChild(rowObj);
        rowObj=null;
        
    }
    </script>