Home > Article > Backend Development > PHPJquery click button to add text box

PHPJquery click button to add text box

巴扎黑Original: 2016-11-11 13:59:561886browse

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>

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：PHP adds mbstring extension libraryNext article：PHP adds mbstring extension library

See more

PHPJquery click button to add text box

Related articles