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

表格增行,删行处理(jquery)

在做后台中遇到的情况,分享下
[html]  
<!DOCTYPE html>  
<html>  
<head>  
<title>表格增行,删行处理</title>  
<script type="text/javascript" src="http://jt.875.cn/js/jquery"></script>     
</head>     
<body>     
<script>     
    $(function(){     
        var show_count = 20;   //要显示的条数     
      var count = $("input:text").val();    //递增的开始值,这里是你的ID     
        var fin_count = parseInt(count) + (show_count-1);   //结束递增的条件              
    
        $("#btn_addtr").click(function(){     
            if(count < fin_count)    //点击时候,如果当前的数字小于递增结束的条件     
           {     
                $("tr:eq(1)").clone().appendTo("table");   //在表格后面添加一行     
                $("tr:last td input:first").val(++count);   //改变添加的行的ID值。     
            }     
        });     
    });     
    
  function deltr(){     
      var length=$("tr").length;     
       if(length<=2){     
          alert("至少保留一行");     
       }else{         
        $("tr:last").remove();     
}     
  }      
</script>     
<input type="button" id="btn_addtr" value="增行">     
<table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">     
  <tr>    
    <td height="30" align="center" bgcolor="#CCCCCC">ID</td>     
    <td align="center" bgcolor="#CCCCCC">Username</td>     
    <td align="center" bgcolor="#CCCCCC">Usertype</td>     
    <td align="center" bgcolor="#CCCCCC">Other</td>     
    <td></td>     
  </tr>     
    
  <tr>     
<div style="background:#ccc;">  
    <td height="30" align="center"><input type="text" size="2" value="1" /></td>     
    <td align="center"><input type="text" name="username" /></td>     
    <td align="center">     
      <select name="type">     
           <option value="1">Administrator</option>     
           <option value="2">Guest</option>     
      </select>     
    </td>     
    <td align="center"><input type="text" name="username2" /></td>     
    <td><input type="button" id="btn_deltr" onclick="deltr()" value="删行"></td>     
</div>  
  </tr>     
    
</table>     
</body>    
</html>  
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,