<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>JSON简单应用</title>
<SCRIPT LANGUAGE="JavaScript" type="text/javaScript" src="json2.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" type="text/javaScript">
<!--
function cfm()
{ //单击确定按钮的操作
var frmObj = document.frmJson; //根据form的名称获取form对象
var tbObj = document.getElementById("dataTb"); //根据id获取table对象
var newRow = tbObj.insertRow(-1); //在table最后添加一行
newRow.insertCell(0).innerText = tbObj.rows.length - 1;
newRow.insertCell(1).innerText = frmObj.txtName.value;
newRow.insertCell(2).innerText = frmObj.txtGender.value;
newRow.insertCell(3).innerText = frmObj.txtAge.value;
newRow.insertCell(4).innerText = frmObj.txtAddress.value;
cnl();
}
function cnl()
{ //单击取消按钮的操作
var frmObj = document.frmJson; //根据form的名称获取form对象
frmObj.txtName.value = "";
frmObj.txtGender.value = "";
frmObj.txtAge.value = "";
frmObj.txtAddress.value = "";
}
function User(userName, gender, age, address)
{ //用户信息
this.userName = userName;
this.gender = gender;
this.age = age;
this.address = address;
}
function subForm()
{ //提交表单的操作
var tbObj = document.getElementById("dataTb"); //根据id获取table对象
var userAry = new Array(); //记录用户信息的数组
for(var i=1; i<tbObj.rows.length; i++)
{
var curRow = tbObj.rows[i]; //得到当前行
userAry[userAry.length] = new User(curRow.cells[1].innerText,
curRow.cells[2].innerText, curRow.cells[3].innerText,
curRow.cells[4].innerText);
}
document.frmJson.userInfo.value = JSON.stringify(userAry);
window.alert(document.frmJson.userInfo.value);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<form name="frmJson" method="post" action="#">
<input type="hidden" name="userInfo" value="">
<table width="450" align="center" border="1" cellspacing="0">
<tr>
<td>姓名:</td>
<td><input type="text" name="txtName"></td>
<td>性别:</td>
<td><input type="text" name="txtGender"></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" name="txtAge"></td>
<td>地址:</td>
<td><input type="text" name="txtAddress"></td>
</tr>
<tr align="center">
<td colspan="4" align="center">
<input type="button" value="确定" onclick="cfm()">
<input type="button" value="取消" onclick="cnl()">
</td>
</tr>
</table>
<table width="450" align="center" border="1" cellspacing="0" id="dataTb">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>地址</th>
</tr>
</table>
<center>
<input type="button" value="提交" onclick="subForm()">
</center>
</form>
</BODY>
</HTML>
使用json值的数组封装数据 html 源代码
1星 需积分: 16 68 浏览量
2015-11-13
22:45:41
上传
评论
收藏 5KB RAR 举报
孤独的记事本
- 粉丝: 1
- 资源: 32
最新资源
- 直接插入排序,冒泡排序,直接选择排序.zip
- 在排序2的基础上,再次对快排进行优化,其次增加快排非递归,归并排序,归并排序非递归版.zip
- 实现了7种排序算法.三种复杂度排序.三种nlogn复杂度排序(堆排序,归并排序,快速排序)一种线性复杂度的排序.zip
- 冒泡排序 直接选择排序 直接插入排序 随机快速排序 归并排序 堆排序.zip
- 课设-内部排序算法比较 包括冒泡排序、直接插入排序、简单选择排序、快速排序、希尔排序、归并排序和堆排序.zip
- Python排序算法.zip
- C语言实现直接插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序、归并排序、计数排序,并带图详解.zip
- 常用工具集参考用于图像等数据处理
- 音乐展示网页、基于Stenography的图像数字水印添加与提取,以及基于颜色矩和Tamura算法的图像相似度评估算法py源码
- 基于EmguCV(OpenCV .net封装),图像数字水印加解密算法的实现,其中包含最低有效位算法,离散傅里叶变换算法+文档书
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈