当前位置:编程学习 > JS >>

js动态表格之一基础部分(1)

[html <html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>增加Table行</title> 
    </head> 
    <script> 
        function addRow(){ 
        //添加一行 
        var newTr = testTbl.insertRow(); 
        //添加两列 
        var newTd0 = newTr.insertCell(); 
        var newTd1 = newTr.insertCell(); 
        //设置列内容和属性 
        newTd1.innerHTML = '<input type=checkbox id="box4">';  
        newTd0.innerText= '新加行'; 
        } 
    </script> 
    <body> 
        <table id="testTbl" border=1> 
            <tr id="tr1"> 
                <td ><input type=checkbox id="box1"></td> 
                <td id="b">第一行</td> 
            </tr> 
        </table>         
        <br /> 
        <input type="button" id="add" onclick="addRow();" value="Add Row" /> 
    </body> 
</html> 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>增加Table行</title>
    </head>
    <script>
        function addRow(){
        //添加一行
        var newTr = testTbl.insertRow();
        //添加两列
        var newTd0 = newTr.insertCell();
        var newTd1 = newTr.insertCell();
        //设置列内容和属性
        newTd1.innerHTML = '<input type=checkbox id="box4">';
        newTd0.innerText= '新加行';
        }
    </script>
    <body>
        <table id="testTbl" border=1>
            <tr id="tr1">
                <td ><input type=checkbox id="box1"></td>
                <td id="b">第一行</td>
            </tr>
        </table>       
        <br />
        <input type="button" id="add" onclick="addRow();" value="Add Row" />
    </body>
</html>

 

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,