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>
?
<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;"><?phpforeach($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>