PHPJquery点击按钮添加文本框

haimingyoung

浏览: 39338 次
性别:
来自: 北京

最近访客更多访客>>

cp669968

sundrmq

feihu088

小邪文

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端
Jquery
PHP

PHP Jquery

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页面

<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>