jquery js 动态加载表格 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'test2.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->


  <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript">
  $(function(){
  $("#btn1").click(function(){
    var str="<tr><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td> <td><input type='button' value='删除' class='btn3'><input type='button' value='撤销' class='btn4'></td></tr>";
    $de = $("#div1").append(str);
     $(".btn3").click(function(){         
         $live=$(this).parent().parent().remove();
         });
     });
     
     $("#btn2").click(function(){
     var str="";
     $("#div2").html("");
     $('input[type=text]').each(function(){
     var inputVal=$(this).val();
     if(inputVal!=""){str+=inputVal+",";}
         
     });
         $("#div2").html(str);
     });
          
     
  });
  //javascript 实现
     var addmore=function(){
     var div=document.getElementById("div3");
     var br=document.createElement("br");
     var input=document.createElement("input");
     var button=document.createElement("input");
     input.setAttribute("type","file");
     button.setAttribute("type","button");
     button.setAttribute("value","Remove");
     div.appendChild(br);
      div.appendChild(input);
      div.appendChild(button);
      button.onclick=function(){
     div.removeChild(br);
     div.removeChild(input);
     div.removeChild(button);
      
      }
      
      
     }
      
      </script>
  
  </head>
  
  <body>
  <input type="button" value="添加" id="btn1">
    <input type="button" value="取值" id="btn2">
    
  <table border="1">
         <div id="div1"></div>
  </table>
  
<div id="div2" style="color: red;"></div>
<hr>
<input type="file" value=""><input type="button" value="上传"><input type="button" value="more..." onclick="addmore()">
<div id="div3" ></div>
  </body>
</html>

 

posted @ 2012-11-23 16:23  小木v587  阅读(285)  评论(0)    收藏  举报