zoukankan      html  css  js  c++  java
  • [Javascript]Table模版操作

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
        
    <head>
            
    <title></title>
            
    <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            
    <script language="javascript">
                
    var objTable;
                
                
    function PageLoad()
                
    {
                    objTable 
    = document.getElementById( "tbNew" );        //找到操作Table
                }

                
                
    function tdvalue()
                
    {
                    
    var objTempRow = objTable.rows[0];        //找到Table的模版行
                    var objNewRow = objTable.insertRow( objTable.rows.length );        //在Table的末尾新增一行
                    objNewRow.id = objTable.rows.length - 1;
                    
    //以模版行建立新行内容
                    for ( var i=0 ; i<objTempRow.cells.length ; i++ )
                    
    {
                        
    var objNewCell = objNewRow.insertCell( i );
                        
                        objNewCell.innerHTML 
    = objTempRow.cells[i].innerHTML;
                    }

                }

                
                
    function DeleteTableRow()
                
    {
                    
    if ( objTable.rows.length -1 > 0 )
                    
    {
                        objTable.deleteRow(objTable.rows.length
    -1);
                    }

                    
    else
                    
    {
                        
    //
                    }

                }

                
                window.onload 
    = PageLoad;
            
    </script>
        
    </head>
        
    <body>
            
    <form id="Form1" name="Form1">
                
    <input id="btnInsert" name="btnInsert" type="button" onclick="tdvalue()" value="添加新行" />
                
    <input id="btnDelete" name="btnDelete" type="button" onclick="DeleteTableRow()" value="删除末行" />
            
    </form>
            
    <TABLE id="tbNew" cellSpacing="1" cellPadding="1" width="100%" border="1">
                
                
    <!--此处为模版行-->
                
    <TR>
                    
    <TD><input id="txtData_1" name="txtData_1" type="text" value=""/></TD>
                    
    <TD><input id="txtData_2" name="txtData_2" type="text" value=""/></TD>
                    
    <TD><input id="txtData_3" name="txtData_3" type="text" value=""/></TD>
                
    </TR>
                
    <!---------------->
                
            
    </TABLE>
        
    </body>
    </html>
  • 相关阅读:
    设计模式(八): 策略模式
    设计模式(七): 迭代器模式
    设计模式(六): 建造者模式
    设计模式(五): 装饰者模式
    设计模式(四): 适配器模式
    设计模式(三): 抽象工厂模式
    设计模式(二): 工厂模式
    设计模式(一): 单例模式
    Hibernate三种状态,缓存,以及update更新问题
    Servlet 生命周期、工作原理
  • 原文地址:https://www.cnblogs.com/HD/p/153192.html
Copyright © 2011-2022 走看看