如何动态地增加表格的行？

var tr = tableId.insertRow();  //插入新行
var td = tr.insertCell();      //插入新列
td.innerText = "meizz(梅花雪)";

解决方案 »

  1.   

    利用innerHTML属性就可以动态修改元素.
      

  2.   

    To: gjd111686(数字金刚)
        在 TABLE 里 innerHTML 是只读的, 不可写的!!!!
      

  3.   

    insertRow(); 和insertCell();  都可以带参数。直接说明放在第几行/列
      

  4.   


    <HTML>
    <HEAD>
    <script language="javascript">
    //--------------------------删除行开始--------------------------------------
    function DeleteRow(obj){
    //删除行
    //index插入的位置
    alert("Table1的行数:"+obj.rows.length+"\n"+"Table1的列数:"+obj.rows(0).cells.length);
    if(obj.rows.length>1)
    {
    obj.deleteRow(obj.rows.length-1);
    }

    }
    //--------------------------删除行结束--------------------------------------//--------------------------插入行开始--------------------------------------
    function InsertRow(obj){
    //插入行
    //index插入的位置
    alert("Table1的行数:"+obj.rows.length+"\n"+"Table1的列数:"+obj.rows(0).cells.length);
    var oTr=obj.insertRow(obj.rows.length);
    oTr.style.height=21
    var oTd
    for (j=0;j<obj.rows(0).cells.length;j++)
    {
    oTd=oTr.insertCell(j)
    oTd.innerText=" "   //" "
    }}
    //--------------------------插入行结束--------------------------------------
    //--------------------------插入列开始--------------------------------------
    function InsertCol(obj){
    var oTd
    for(j=0;j<obj.rows.length;j++){

    oTd=obj.rows(j).insertCell(obj.rows(j).cells.length);
    oTd.innerText=" "   //" "
    }
    }
    //--------------------------插入列结束--------------------------------------//--------------------------删除列开始--------------------------------------
    function DeleteCol(obj){
    alert(Table1.rows(0).cells.length);
    for(j=0;j<Table1.rows.length;j++)
    {
    if(Table1.rows(j).cells.length>1)
    {
    Table1.rows(j).deleteCell(Table1.rows(j).cells.length-1);
    }
    }
    }
    //--------------------------删除列结束--------------------------------------//--------------------------更改表格文字开始--------------------------------------
    function showinput()
    {
    elm = event.srcElement;
    if (elm.tagName != "TD") return;
    elm.innerHTML = "<input onblur='hide()'  value='"+elm.innerText+"' style='text-align:center;width:100%;border-width: 0px;' name='input1' id='input1'></input>";
    document.all.item("input1").focus();
    document.all.item("input1").select();
    }
    function hide()
    {
    elm = event.srcElement;
    elm.parentNode.innerHTML = elm.value
    }
    //--------------------------更改表格文字结束--------------------------------------
    //function document.onmousedown(){
    // alert(event.keyCode);
    //}

    </script>
    <TITLE>Lion互动网络=》动态添加修改表格（行、列、内容）</TITLE>
    </HEAD>
    <BODY>
    <INPUT onclick="DeleteRow(Table1)" type="button" value="删除行" ID="Button1" NAME="Button1">&nbsp;<INPUT onclick="InsertRow(Table1)" type="button" value="插入行" ID="Button2" NAME="Button2"><BR>
    <INPUT onclick="DeleteCol(Table1)" type="button" value="删除列" ID="Button3" NAME="Button3">&nbsp;<INPUT onclick="InsertCol(Table1)" type="button" value="插入列" ID="Button4" NAME="Button4"></P>
    <P><asp:datagrid id="ID_Grid" onclick="showinput()" runat="server" Width="100%" AutoGenerateColumns="False"></asp:datagrid>Table1:
    <TABLE id="Table1" onclick="showinput()" cellSpacing="1" cellPadding="1" width="300" border="1">
    <TR>
    <TD>d</TD>
    <TD>c</TD>
    <TD>a</TD>
    </TR>
    <TR>
    <TD>a</TD>
    <TD>b</TD>
    <TD>c</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
      

  5.   

    To:meizz(梅花雪) 
    innerHTML 可以动态修改<Table id=table1>
    <tr>
    <td>aaaaaaaaaaaaaa</td>
    </tr></Table>
    <input type=button  onclick="a();">
    <Script Language="JavaScript">
    function a(){
    tab=document.all.table1
    cel = tab.rows[0].cells[0]
    cel.innerHTML = "<input type=text value=lf>";
    }
    </Script>