zoukankan      html  css  js  c++  java
  • js练习——动态控制表格中得行

    <html>
    <!---------------------------------------------------------------
    --                      动态 表格
    --                      kay
    --                    2007-07-25
    --------------------------------------------------------------
    -->
    <head>
        
    <title>动态添加</title>
        
    <script language="javascript">
            
    var value;
            
    function change()
            {
                
    var selectvalue = document.getElementById("se").selectedIndex;
                value 
    = selectvalue;
            }
            
            
    function addHtml(r)
            {
                
    var row = document.getElementById("tb");
                
    var rownum ;
                
                
    if(r!=0)
                {
                    rownum 
    = r + 1;
                }
                
    else
                {
                    
    //获得当前得行数
                    var num = document.getElementById("tb").rows.length;
                    
    //使添加得新行在表格底部
                    rownum = num - 1;
                }
                row.insertRow(rownum);
                
    //值编号
                row.rows[rownum].insertCell(0);
                row.rows[rownum].cells[
    0].innerHTML="<input type='text'/>";
                
    //值代码
                row.rows[rownum].insertCell(1);
                row.rows[rownum].cells[
    1].innerHTML="<input  type='text'/>";
                
                
    if(value==2)
                {
                    
    //最大值
                    row.rows[rownum].insertCell(2);
                    row.rows[rownum].cells[
    2].innerHTML="<input type='text'/>";
                    
    //最小值
                    row.rows[rownum].insertCell(3);
                    row.rows[rownum].cells[
    3].innerHTML="<input type='text'/>";
                }
                
    else
                {
                    
    //最大值
                    row.rows[rownum].insertCell(2);
                    row.rows[rownum].cells[
    2].innerHTML="<input type='text' value='不可用' disabled='disabled'/>";
                    
    //最小值
                    row.rows[rownum].insertCell(3);
                    row.rows[rownum].cells[
    3].innerHTML="<input type='text' value='不可用' disabled='disabled'/>";
                
                }
                
    //值描述
                row.rows[rownum].insertCell(4);
                row.rows[rownum].cells[
    4].innerHTML="<input type='text'/>";
                
    //添加方式
                row.rows[rownum].insertCell(5);
                row.rows[rownum].cells[
    5].innerHTML="<select id='sys'><option value='0'>系统定义</option><option value='1'>用户定义            </option></select>";
                
                
    //操作
                row.rows[rownum].insertCell(6);
                row.rows[rownum].cells[
    6].innerHTML="<input type='button' value='+' onclick='addHtml("+rownum+")'/><input type='button' value='-' onclick='deleterow("+rownum+")'/>";
            }
            
            
    function deleterow(rnum)
            {
                
    var num = document.getElementById("tb").rows.length;
        
                
    if(rnum != num)
                {
                    
    var aa = num - rnum ;
                    
    if(aa == 1)
                    {
                    
    //防止删除最后一行
                        rnum = rnum - 1;
                        
                    }
                    
    if(confirm('你确定要删除吗?'))
                    {
                        
    var tbody = document.getElementById("tb");
                        tbody.deleteRow(rnum);
                    }
                    
                }
            }
        
    </script>
    </head>
    <body>

    <form id="form1" name="form1" method="post" action="">
    <select id="se" onchange="change()">
        
    <option value="num">数值</option>
        
    <option value="str">字符</option>
        
    <option value="strnum">数值+字符</option>
    </select>
      
    <p>
        
    <input type="button" name="Submit2" value="Add" onclick="addHtml(000)"/>
      
    </p>
      
    <table width="50%" border="1" align="center">
      
    <tbody id="tb">
        
    <tr>
          
    <td align="center" valign="middle">值编号</td>
          
    <td align="center" valign="middle">值代码</td>
          
    <td align="center" valign="middle">最大值</td>
          
    <td align="center" valign="middle">最小值</td>
          
    <td align="center" valign="middle">值描述</td>
          
    <td align="center" valign="middle">添加方式</td>
          
    <td align="center" valign="middle">操作</td>
        
    </tr>
        
        
    <tr>
          
    <td colspan="7" align="center" valign="middle"><input type="submit" name="Submit" value="保存" /></td>
        
    </tr>
        
    </tbody>
      
    </table>
    </form>
    </body>
    </html>
  • 相关阅读:
    hdu 3371 Connect the Cities
    hust 1102 Constructing Roads
    hdu 1856 More is better
    hdu 1325 Is It A Tree?
    poj 2828 Buy Tickets (线段树)
    sdut 2351 In Danger (找规律)
    poj 2528 Mayor's posters(线段树)
    poj 2352 Stars (树状数组)
    poj 2492 A Bug's Life (并查集)
    poj 1703 Find them, Catch them(并查集)
  • 原文地址:https://www.cnblogs.com/kay/p/830824.html
Copyright © 2011-2022 走看看