js数组生成json数据 js二维数组的创建

以下是一段html源代码：

<div class="form-group">
    <label for="pricetext" class="col-sm-1 control-label">物料管理</label>
    <div class="col-sm-11">
      	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog set_width">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" id="menu_close22" data-dismiss="modal" 
								aria-hidden="true">×
						</button>
						<h4 class="modal-title" id="myModalLabel">
							物料管理
						</h4>
					</div>
					<div class="modal-body">
						<div id="tree2">
							<div class="form-group" style="border-bottom:1px solid #EEEEEE;">
								<label class="col-sm-2 margin-b-5 text_align_l">产品名称</label>
								<label class="col-sm-2 margin-b-5 text_align_l">规格</label>
								<label class="col-sm-2 margin-b-5 text_align_l">单位</label>
								<label class="col-sm-2 margin-b-5 text_align_l">数量</label>
								<label class="col-sm-2 margin-b-5 text_align_l">单价</label>
								<label class="col-sm-1 margin-b-5 text_align_l">自来</label>
								<label class="col-sm-1 margin-b-5 text_align_l">操作</label>
							</div>
							<div class="form-group" style="border-bottom:1px solid #EEEEEE;">
								<div class="col-sm-2 margin-b-5">
									<input type="text" data="name" class="form-control">
								</div>
								<div class="col-sm-2 margin-b-5">
									<input type="text" data="spec" class="form-control">
								</div>
								<div class="col-sm-2 margin-b-5">
									<input type="text" data="unit" class="form-control">
								</div>
								<div class="col-sm-2 margin-b-5">
									<input type="text" data="numbers" class="form-control">
								</div>
								<div class="col-sm-2 margin-b-5">
									<input type="text" data="price" class="form-control">
								</div>
								<div class="col-sm-1 margin-b-5 text_align_c">
									<input type="checkbox">
									<input type="hidden" data="zilai" value="0">
								</div>
							    <label class="col-sm-1 margin-b-5 control-label">
							    	<span class="glyphicon glyphicon-plus color-green font-s20" title="新增"></span>
							    </label>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" id="menu_clear" data-dismiss="modal">
							<span class="glyphicon glyphicon-trash"></span> 清理
						</button>
						<button type="button" class="btn btn-primary" id="menu_close2" data-dismiss="modal">
							<span class="glyphicon glyphicon-off"></span> 关闭
						</button>
					</div>
				</div>
			</div>
		</div>
		<div class="input-group">
        	<input type="text" class="form-control" id="materialtext" name="materialtext" placeholder="请选择单价" value="" readonly>
            <span class="input-group-btn">
            	<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal2" id="sel_menu">
            		<span class="glyphicon glyphicon-search"></span>
            	</button>
            </span>
    	</div>
	</div>
</div>

以下是一段jquery语句：

<script type="text/javascript">
$(document).ready(function(){
		$('#tree2 label .glyphicon-plus').click(function(){
			var obj = $(this).parent().parent();
			var obj1 = $(obj).clone(true);

			$(obj1).insertAfter($(obj));
			$(obj1).find("input").val('');
			$(obj).children('label:eq(-1)').html('<span class="glyphicon glyphicon-minus color-grey font-s20"></span>');

			$(obj).find('label .glyphicon-minus').click(function(){
				$(this).parent().parent().remove();
			});
		});

		$('#tree2 label .glyphicon-minus').click(function(){
			$(this).parent().parent().remove();
		});

		$('#tree2 div input[type="checkbox"]').click(function(){
			if($(this).is(':checked') == true)
			{
				$(this).siblings('input[type="hidden"]').val(1);
			}else{
				$(this).siblings('input[type="hidden"]').val(0);
			}
		});

		$('#menu_close2,#menu_close22').click(function(){
			var arr = new Array();
			$('#tree2 > div:gt(0)').each(function(i){
				var brr = new Array();
				$(this).find('input:not([type="checkbox"])').each(function(e){
					if(e == 0 && $(this).val() == '')
					{
						return false;
					}

					brr[e] = $(this).val();
				});

				arr[i] = brr;		
			});
			
			var strify = JSON.stringify(arr);
			if(strify != '[[]]')
			{
				$('#materialtext').val(strify);
			}
		});

	});

</script>

如果您试图将源码复制去运行，您可能还需要加载一个bootstrap的js文件

今天的重点是关于js的数组如何创建出二维数组，并且如何将数组转换为JSON数据，这可能会很容易，毕竟网上资料也不少：

//以下这段源码包含了今天的主要内容，详细请看注解
//当点击模型的关闭按钮时发生以下事件
$('#menu_close2,#menu_close22').click(function(){
	//创建一个空数组
	var arr = new Array();

	//遍历id=tree2这个元素的一级子元素
	$('#tree2 > div:gt(0)').each(function(i){
	
		//创建第二个空数组
		var brr = new Array();
		
		//从某个子元素的子元素里面提取input元素，并且排除类型为checkbox的元素
		$(this).find('input:not([type="checkbox"])').each(function(e){
			//这里需要清除第一个input元素中没有数据的整个循环
			if(e == 0 && $(this).val() == '')
			{
				//跳出整个each循环
				return false;
			}

			//将这个子元素中所有input数据存储在brr数组中
			brr[e] = $(this).val();
		});

		//将brr数据存储在arr数组中，形成js的二维数组
		arr[i] = brr; 
	});
	
	//将arr数组转换为JSON数据
	var strify = JSON.stringify(arr);

	//如果JSON数据不为空
	if(strify != '[[]]')
	{
		//将JSON字符串放入指定的input中
		$('#materialtext').val(strify);
	}
});

js不能直接创建二维数组，需要通过中介变量进行转换，效果还是有的，这点毋庸置疑

至于转JSON这个方法只是附带的，有兴趣可以研究

喜欢bootstrap的，可以关注网站：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html