PHPJquery click button to add text box-PHP Tutorial-php.cn

PHPJquery click button to add text box

巴扎黑

Release： 2016-11-11 13:59:56

Original

1886 people have browsed it

html页面

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Jquery添加输入框</title>  
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>  
<script type="text/javascript" src="js/jquery.json.min.js"></script>  
</head>  
  
<body>  
    <div id="input_list">  
    </div>  
    <input type="button" value="添加" onclick="addInput()"/>  
    <input type="button" value="确认" onclick="isOk()"/>  
      
    <hr>  
    <form action="input.php" method="post">  
     <input type="text" id="json_str" name="json" size="100"/>  
     <input type="submit" value="提交" />  
    </form>  
<script type="text/javascript">  
    var index = 1;  
  
    function addInput(){  
        $("#input_list").append("<input class=&#39;keys&#39; id=&#39;key"+index+"&#39; size=&#39;15&#39; /> : <input class=&#39;values&#39; id=&#39;value"+index+"&#39; size=&#39;50&#39;/> <br>");  
        index++;  
    }  
      
    function isOk(){  
        var len = $(".keys").length;          
          
        var jsonArray = new Array();  
        for(var i = 1; i<=len; i++){  
              
            var jsonObj = new Array();  
              
            var key = $("#key"+i).val();  
            var value = $("#value"+i).val();  
            jsonObj[0]=key;  
            jsonObj[1]=value;  
              
            jsonArray.push(jsonObj);  
              
        }  
          
          
        var jsonstr=&#39;[&#39;  
        for ( var j = 0; j < jsonArray.length; j++) {  
            jsonstr+= &#39;{&#39;;   
            jsonstr+=&#39;\"&#39;+jsonArray[j][0]+&#39;\"&#39;+":";  
            jsonstr+=&#39;\"&#39;+jsonArray[j][1]+&#39;\"&#39;;  
            jsonstr +=&#39;}&#39;  
            if(j!=jsonArray.length-1){  
            jsonstr+=&#39;,&#39;  
            }  
        }  
        jsonstr+=&#39;]&#39;;  
          
        $("#json_str").val(jsonstr);  
  
        alert("添加成功！");  
          
    }  
</script>  
</body>  
</html>

Copy after login

PHP页面

Php代码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<?php  
  
$json = $_REQUEST["json"];  
$arr=json_decode($json,true);  
?>  
  
<table style="border:1px solid #CCC; width:100%;  background-color:#CCC;">  
  
<?php  
foreach($arr as $item){  
    foreach($item as $key=>$value){  
?>  
<tr>  
    <td style="width:20%;height:30px; background-color:#E5E5E5;"><?php echo $key;?></td>  
    <td style="width:80%;height:30px; background-color:#FFF;"><?php echo $value;?></td>  
</tr>  
<?php      
    }  
}  
?>  
</table>

Copy after login