PHPJqueryボタンをクリックしてテキストボックスを追加します-PHPチュートリアル-php.cn

PHPJqueryボタンをクリックしてテキストボックスを追加します

WBOY

リリース： 2016-06-13 12:09:54

オリジナル

990 人が閲覧しました

PHPJquery ボタンをクリックしてテキストボックスを追加します

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>

ログイン後にコピー