suchen

Heim >Backend-Entwicklung >PHP-Tutorial >Klicken Sie auf die PHPJQuery-Schaltfläche, um ein Textfeld hinzuzufügen

Klicken Sie auf die PHPJQuery-Schaltfläche, um ein Textfeld hinzuzufügen

巴扎黑
巴扎黑Original
2016-11-11 13:59:561917Durchsuche

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>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：PHP fügt eine mbstring-Erweiterungsbibliothek hinzuNächster Artikel：PHP fügt eine mbstring-Erweiterungsbibliothek hinzu

In Verbindung stehende Artikel

Mehr sehen