有关Html的问题

在一页面上有一个表格，该表格只有有一表头，下面是已输入框和一按钮。我想在点击按钮时表头下面会自动加一行表格，并把输入框的内容显示在那里。该怎么做啊，求高手指点。最好有相应代码！

解决方案 »

  1.   

    <html> 
    <body> 
    <table border="1" id="tbId">
    <tr>
    <td>表头</td>
    <tr>
    </table>
    <input type="text" name="info" id="info" /> &nbsp; <input type="button" value="添加" onclick="addText()" />
    <script>
    <!--
    function addText(){
    var tbid=document.getElementById("tbId");
    var info=document.getElementById("info");
    var infoText=info.value;
    var tr=document.createElement("tr");
    var td=document.createElement("td");
    td.innerHTML=infoText;
    tr.appendChild(td);
    tbid.appendChild(tr);
    info.value="";
    }
    -->
    </script>
    </body> 
    </html> 
      

  2.   

    使用js实现。
    <table id="selfAddTable" >
         <th>编号</th><th>姓名</th><th>按钮</th>
         <tr><td><input /></td><td><input /></td><td><button onclick="selfAdd();"/></td></tr>
    </table><script language="java/text">
            function selfAdd(){
                    var table = document.findElementById("selfAddTable");
                    var content = "<tr><td><input /></td><td><input /></td><td><input type='button' onclick='selfAdd();' /></td>";
                    table.append(content);
            }</script>你试试~
      

  3.   

    赋值的话就拼写 那个 content串。
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style>
    a{color:blue;}
    </style>
    <script>
    function addRow(obj1,obj2){
    var title = document.getElementById(obj1);
    var content = document.getElementById(obj2); var myTable=document.getElementById('myTable').insertRow(0)
    var x=myTable.insertCell(0);
    var y=myTable.insertCell(1)
    var z=myTable.insertCell(2)
    x.innerHTML=title.value;
    y.innerHTML=content.value;
    z.innerHTML="<a href=\"#\" onclick=\"deleteRow(this)\">删除</a>";
    }
    function deleteRow(obj){
    var i = obj.parentNode.parentNode.rowIndex;
    document.getElementById('myTable').deleteRow(i);
    }
    </script>
    </head>
    <body>
    <table id="myTable" style="border:1px solid blue;" cellspacing="3" cellpadding="3">
    <tr>
    <td><input type="text" id="title" /></td>
    <td><input type="text" id="content"/></td>
    <td><input type="button" value="保存" onclick="addRow('title','content')" /></td>
    </tr>
    </table>
    </body>
    </html>