Home >Backend Development >PHP Tutorial >PHPJquery click button to add text box
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='keys' id='key"+index+"' size='15' /> : <input class='values' id='value"+index+"' size='50'/> <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='[' for ( var j = 0; j < jsonArray.length; j++) { jsonstr+= '{'; jsonstr+='\"'+jsonArray[j][0]+'\"'+":"; jsonstr+='\"'+jsonArray[j][1]+'\"'; jsonstr +='}' if(j!=jsonArray.length-1){ jsonstr+=',' } } jsonstr+=']'; $("#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>