dynamic add rows into table (support firefox or IE5+)

最新推荐文章于 2024-04-24 16:59:31 发布

eagle_speed

最新推荐文章于 2024-04-24 16:59:31 发布

阅读量623

点赞数

分类专栏： JavaScript 文章标签： firefox table ie

本文链接：https://blog.csdn.net/eagle_speed/article/details/2845537

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 
 <html>
    <body>
        
     <form action="#" method="POST"> 
            Add Row Now: <select id="dynamicOption" onchange="return addRow(this.value);"> 
                                    </select> 
    </form> <br>
    
        <table border="1" id="dynamicTable">
                <tr>
                        <th>Name</th>
                        <th>Password</th>   
                        <th>Delete Row</th>
                </tr>
        </table>
        
    </body>
    
    <script type="text/javascript">
    //Add row method
    function addRow(addCounts){
        var objTable = document.getElementById("dynamicTable");
        var index =  objTable.rows.length;
        for(var i = 0;i < addCounts; ++ i){
            var newTr = objTable.insertRow(objTable.rows.length);
            
            //Add three td(column)
            var newTd0 = newTr.insertCell(0);
            var newTd1 = newTr.insertCell(1);
            var newTd2 = newTr.insertCell(2);
            //Set content to td
            newTd0.innerHTML = "Tom" + (index ++); 
        newTd1.innerHTML=  "<input type='text' maxlength='2'/>";
        newTd2.innerHTML=  "<a  οnclick='return delRow(" + (index - 1) + ")' >Delete this row</a>";
        }
    }
    
    //Delete row method
    function delRow(delCount){
            document.getElementById("dynamicTable").deleteRow(delCount);    //delete specific row
            changeRowsIndex(delCount);
    }
    
    //chang index of rows
    function changeRowsIndex(currentCount){
        for(var i=document.getElementById("dynamicTable").rows.length - 1;i >= currentCount;-- i){
                document.getElementById("dynamicTable").rows[i].cells[2].innerHTML =  "<a οnclick='return delRow(" + (i) + ")'>Delete this row</a>";
        }
    }
    
    //Add option to select
     for(var i = 0;i < 20;++i){ 
                var objOption = document.createElement("OPTION"); //Create OPTION element 
                objOption.text = "Add " + i + " Rows"; //Option's text (show it in page) 
                    objOption.value = i; //Option's value 
                 document.getElementById("dynamicOption").options.add(objOption);   //Add option element to select label 
    } 
    </script>
</html>
 

eagle_speed

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dynamic add rows into table (support firefox or IE5+)

html> body> form action="#" method="POST"> Add Row Now: select id="dynamicOption" onchange="return addRow(this.value);"> se
复制链接

扫一扫