PHPJquery点击按钮添加文本框
程序员文章站
2022-03-04 16:08:45
...
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>
上一篇： Event Loop浅谈
下一篇： 解决表单中文本框和提交按钮对不齐的问题