//定义一个自动创建表格的函数
//cont容器id,cla表格的类名，col表格的行数，
//ThArr表格的头数据，TdArr表格的单元格数据
function createTable(cont,cla,col,ThArr,TdArr){
	$("#"+cont).children('table').remove();
	var _table=$('<table class="' + cla + '"></table>');
	var _thead=$('<thead></thead>');
	var _tbody=$('<tbody></tbody>');
	var ThArray=new Array();	//设置th的数组
	var TrArray=new Array();	//设置tr的数组
	var TdArray=new Array();	//设置td的数组
	var TdLength;	//获取单元格个数
	var TrLength; //获取行数
	TdLength=TdArr.length;
	TrLength=Math.ceil(TdLength/col);
	// 给每个th设置值
	for(var i=0;i<col;i++)
	{
		ThArray[i]=$("<th>"+ThArr[i]+"</th>");
	}
	// 给每个td设置值
	for(var i=0;i<TdLength;i++)
	{
		TdArray[i]=$("<td>"+TdArr[i]+"</td>");
	}
	//设置tr
	for(var i=0;i<TrLength;i++)
	{
		TrArray[i]=$("<tr></tr>");
	}
	//将td以col个赋给tr
	var n=0;
	for(var i=0;i<TrLength;i++)
	{
		for(var k=0;k<col;k++)
		{
			TrArray[i].append(TdArray[n]);
			n++;
		}
	}
	//给th赋给thead
	for(var i=0;i<col;i++)
	{
		_thead.append(ThArray[i]);
	}
	_table.append(_thead);
	// 将tr赋给table
	for(var i=0;i<TrLength;i++)
	{
		_tbody.append(TrArray[i]);
	}
	_table.append(_tbody);
	//将table添加到指定的容器中
	$("#"+cont).append(_table);
}

//定义一个自动创建表格的函数
//ThArr表格的头数据，TdArr表格的单元格数据
function createTablenew(ele,ThArr,TdArr){
	ele.children('table').remove();
	var _table=$('<table></table>');
	var _thead=$('<thead></thead>');
	var _tbody=$('<tbody></tbody>');
	var ThArray=new Array();	//设置th的数组
	var TrArray=new Array();	//设置tr的数组
	var TdArray=new Array();	//设置td的数组
	var TdLength;	//获取单元格个数
	var TrLength; //获取行数
	TdLength=TdArr.length;
	TrLength=Math.ceil(TdLength/ThArr.length);
	// 给每个th设置值
	for(var i=0;i<ThArr.length;i++)
	{
		ThArray[i]=$("<th>"+ThArr[i]+"</th>");
	}
	// 给每个td设置值
	for(var i=0;i<TdLength;i++)
	{
		TdArray[i]=$("<td>"+TdArr[i]+"</td>");
	}
	//设置tr
	for(var i=0;i<TrLength;i++)
	{
		TrArray[i]=$("<tr></tr>");
	}
	//将td以col个赋给tr
	var n=0;
	for(var i=0;i<TrLength;i++)
	{
		for(var k=0;k<ThArr.length;k++)
		{
			TrArray[i].append(TdArray[n]);
			n++;
		}
	}
	//给th赋给thead
	for(var i=0;i<ThArr.length;i++)
	{
		_thead.append(ThArray[i]);
	}
	_table.append(_thead);
	// 将tr赋给table
	for(var i=0;i<TrLength;i++)
	{
		_tbody.append(TrArray[i]);
	}
	_table.append(_tbody);
	//将table添加到指定的容器中
	ele.append(_table);
}

//定义一个自动创建表格的函数
//ThArr表格的头数据;TdArr表格的单元格数据;TrArr表格的行编号数据
function createTbl(ele,ThArr,TdArr,TrArr){
	ele.children('table').remove();
	var _table=$('<table></table>');
	var _thead=$('<thead></thead>');
	var _tbody=$('<tbody></tbody>');
	var ThArray=new Array();	//设置th的数组
	var TrArray=new Array();	//设置tr的数组
	var TdArray=new Array();	//设置td的数组
	var TdLength;	//获取单元格个数
	var TrLength; //获取行数
	TdLength=TdArr.length;
	TrLength=Math.ceil(TdLength/ThArr.length);
	// 给每个th设置值
	for(var i=0;i<ThArr.length;i++)
	{
		ThArray[i]=$("<th>"+ThArr[i]+"</th>");
	}
	// 给每个td设置值
	for(var i=0;i<TdLength;i++)
	{
		TdArray[i]=$("<td>"+TdArr[i]+"</td>");
	}
	//设置tr
	for(var i=0;i<TrLength;i++)
	{
		TrArray[i]=$("<tr num='"+TrArr[i]+"'></tr>");
	}
	//将td以col个赋给tr
	var n=0;
	for(var i=0;i<TrLength;i++)
	{
		for(var k=0;k<ThArr.length;k++)
		{
			TrArray[i].append(TdArray[n]);
			n++;
		}
	}
	//给th赋给thead
	for(var i=0;i<ThArr.length;i++)
	{
		_thead.append(ThArray[i]);
	}
	_table.append(_thead);
	// 将tr赋给table
	for(var i=0;i<TrLength;i++)
	{
		_tbody.append(TrArray[i]);
	}
	_table.append(_tbody);
	//将table添加到指定的容器中
	ele.append(_table);
}

//向表格中追加数据
function addTd(ele,len,__ArrTd){
	//定义tr和td标签
	var __ArrTagTr=new Array();
	var __ArrTagTd=new Array();
	var __TrLength=0;
	__TrLength=Math.ceil(__ArrTd.length/len);
	//创建tr
	for(var i=0;i<__TrLength;i++)
	{
		__ArrTagTr[i]=$('<tr class="red" newTd></tr>');
	}
	//给每个td添加文本
	for(var i=0;i<__ArrTd.length;i++)
	{
		__ArrTagTd[i]=$('<td>'+__ArrTd[i]+'</td>');
	}
	var n=0;
	//根据len将td添加到对应的行
	for(var i=0;i<__TrLength;i++)
	{
		for(var k=0;k<len;k++)
		{
			__ArrTagTr[i].append(__ArrTagTd[n]);
			n++;
		}
	}
	for(var i=0;i<__TrLength;i++)
	{
		ele.append(__ArrTagTr[i]);
	}
}


//js创建表格选项内容
function createCard(ele,ArrTh,ArrTd){
	ele.children('table').remove();
	var __table=$('<table></table>');
	var __thead=$('<thead></thead>');
	var __tbody=$('<tbody></tbody>');
	var __ArrTh=new Array();
	var __ArrTr=new Array();
	var __ArrTd=new Array();

	// 通过for循环将值给th
	for(var i=0;i<ArrTh.length;i++)
	{
		__ArrTh[i]=$('<th>'+ArrTh[i]+'</th>');
	}
	// 将th放到thead内
	for(var i=0;i<ArrTh.length;i++)
	{
		__thead.append(__ArrTh[i]);
	}
	//通过ArrTd的长度设置tr的个数
	for(var i=0;i<ArrTd.length;i++)
	{
		__ArrTr[i]=$('<tr></tr>');
	}
	// 通过for循环将值给td
	for(var i=0;i<ArrTd.length;i++)
	{
		for(var k=0;k<ArrTd[0].length;k++)
		{
			var n=i*ArrTd[0].length+k;
			__ArrTd[n]=$('<td>'+ArrTd[i][k]+'</td>');
		}
	}
	// 将td放到tr中
	for(var i=0;i<ArrTd.length;i++)
	{
		for(var k=0;k<ArrTd[0].length;k++)
		{
			var n=i*ArrTd[0].length+k;
			__ArrTr[i].append(__ArrTd[n]);
		}
	}
	// 将tr放到tbody中
	for(var i=0;i<ArrTd.length;i++)
	{
		__tbody.append(__ArrTr[i]);
	}
	//将thead和tbody添加到table中
	__table.append(__thead);
	__table.append(__tbody);
	//将span添加到容器中
	ele.append(__table);
}

//创建等待的框框
function createWait(ele){
	var __eleWidth=ele.width();
	var __wait=$('<div class="wait">'+"数据加载中，请稍等..."+'</div>');
	//var __mask=$('<div class="mask"></div>');
	var __left=ele.scrollLeft()+__eleWidth/2;
	ele.append(__wait);
	//定义等待框的css
	ele.children('.wait').css({
		'position':'absolute',
		'z-index':'100',
		'top':'50%',
		'margin-top':'-30px',
		'left':__left+'px',
		'margin-left':'-100px',
		'width':'200px',
		'height':'60px',
		'line-height':'60px',
		'text-align':'center',
		'font-size':'16px',
		'background-color':'#ccc',
		'color':'#000'
	});
}

//移除等待框
function removeWait(ele){
	ele.children('.wait').remove();
	$('body').children('.mask').remove();
}


$(document).ready(function(){
	// 点击显示表格选项
	$('#container .cardOpt').click(function(){
		$('#cardOption').show();
		$('#allShade').show();
		$('body').css('overflow','hidden');
	});
	// 点击隐藏表格选项
	$('#outCardOption').click(function(){
		$('#cardOption').hide();
		$('#allShade').hide();
		$('body').css('overflow','scroll');
	});
	// 浏览器滚动时表格选项和遮罩层的位置改变
	$(document).scroll(function(){
		var scrollY=$(this).scrollTop();
		$('#cardOption').css('top',scrollY+50+'px');
		$('#cardResisOption').css('top',scrollY+50+'px');
		$('#allShade').css('top',scrollY+'px');
	});
});
//在容器中创建文本框
function createInput(ele,val){
	if(ele.find('input').length==0)
	{
		ele.text('');
		var __input=$('<input type="text" value="'+val+'" focus/>');
		ele.append(__input);
	}
}
//通过表格选项的值返回表头数据
function getArrTh(__stateArr,__arrTh){
	var __thIndex=0;		//新表头数据的下标
	var __newTh=new Array();	//存储新的表头数据
	for(var i=0;i<__arrTh.length;i++)
	{
		if(__stateArr[i]==1)
		{
			__newTh[__thIndex]=__arrTh[i];
			__thIndex++;
		}
	}
	return __newTh;
}
//通过表格选项的值返回表内数据
function getArrTd(__stateArr,__arrTd){
	var __tdIndex=0;
	var __newTd=new Array();
	for(var i=0;i<__arrTd.length;i++)
	{
		var stateIndex=i%__stateArr.length;	//获取stateArr的下标
		if(__stateArr[stateIndex]==1)
			{
			 	__newTd[__tdIndex]=__arrTd[i];
			 	__tdIndex++;
			}
	}
	return __newTd;
}
//让表格头和表格内的宽度相等
function widthEqual(eleHead,eleBody){
	var widthHead=new Array();  //获取头部单元格的宽度
	var widthBody=new Array();  //获取表格内的单元格的宽度
	var maxWidth=new Array();    //获取表格最宽
	for(var i=0;i<eleHead.length;i++)
	{
		widthHead[i]=eleHead.eq(i).width();
	}
	for(var i=0;i<eleHead.length;i++)
	{
		widthBody[i]=eleBody.eq(i).width();
	}
	for(var i=0;i<eleHead.length;i++)
	{
		if(widthHead[i]>widthBody[i])
		{
			maxWidth[i]=widthHead[i];
		}else{
			maxWidth[i]=widthBody[i];
		}
	}
	// 将表格的第一行和头部的宽度相等
	for(var i=0;i<eleHead.length;i++)
	{
		eleHead.eq(i).css('width',maxWidth[i]+'px');
			eleBody.eq(i).css('width',maxWidth[i]+'px');
	}
}
//在点击的容器内创建select标签
//ele为容器，optArr为option的数据，txt为容器固有内容
function createSelect(ele,optArr,txt){
	ele.text('');
	var __select=$('<select></select>');
	var __option=new Array();
	for(var i=0;i<optArr.length;i++)
	{
		if(txt==optArr[i])
		{
			__option[i]=$('<option value="'+optArr[i]+'" selected>'+optArr[i]+'</option>');
		}else{
			__option[i]=$('<option value="'+optArr[i]+'">'+optArr[i]+'</option>');
		}
	}
	for(var i=0;i<optArr.length;i++)
	{
		__select.append(__option[i]);
	}
	ele.append(__select);
}

// 在下拉列表中生成option
function createOptions(ele, optList, all) {
	// 清空ele
	ele.text("");
	// 根据all判断是否有全部的选项
	if(all) {
		var _option = $('<option value="">全部（共'+optList.length+'种）</option>');
		ele.append(_option);
	}
	
	// 根据optList的值生成内容
	for(var i=0; i<optList.length; i++) {
		var _data = optList[i];
		var _option = $('<option value="'+_data.val+'">'+_data.txt+'</option>');
		_option.attr('selected', _data.selected);
		_option.data('attr', _data.data);
		
		Object.keys(_data.attr).forEach(function(key) {
			_option.attr(key, _data.attr[key]);
		});
		
		ele.append(_option);
	}
}

// 获取生成下拉列表的数据
function getOptionsData(txt, val, data, attr, isSelected) {
	var _tmp = {};
	_tmp.txt = txt;
	_tmp.val = val;
	_tmp.attr = attr || {};
	_tmp.data = data || {};
	_tmp.selected = isSelected?true:false;
	return _tmp;
}

/*
	创建表格
	@param jquery对象 eleHead  表格头部容器
	@param jquery对象 eleBody  表格body容器
	@param array thList 表格头部数据
	@param array tdList 表格body数据
	@param array status 表格状态数组(没有则默认全部显示)
*/
function createFullTbl(eleHead, eleBody, thList, tdList, status) {
	if(arguments.length < 5) {
		var status = new Array();
		for(var i = 0; i < thList.length; i++) {
			status.push(1);
		}
	}
	var arrNewTh = getArrTh(status, thList);
	var arrNewTd = getArrTd(status, tdList);

	createTablenew(eleHead, arrNewTh, arrNewTd);
	createTablenew(eleBody, arrNewTh, arrNewTd);
	
	setTblWidth(eleHead, eleBody);
	eleBody.scroll(function() {
		setTblWidth(eleHead, eleBody);
	});
}

/*
	使表格的头部和body内容对齐
	@param jquery对象 eleHead  表格头部容器
	@param jquery对象 eleBody  表格body容器
*/
function setTblWidth(tbHead, tbBody) {
	var tblBdWd = tbBody.find('table').width();
	tbHead.find('table').width(tblBdWd);
	var tbScrollLeft = tbBody.scrollLeft();
	tbHead.find('table').css('left', -tbScrollLeft + 'px');
}

// 向已有的表格添加td
function addTr(ele, TdArr) {
	var _tbody=ele.find('tbody');
	var TdArray=new Array();	//设置td的数组
	// 给每个td设置值
	for(var i=0;i<TdArr.length;i++)
	{
		TdArray[i]=$("<td>"+TdArr[i]+"</td>");
	}
	var _tr = $('<tr></tr>');
	_tr.append(TdArray);
	//将tr添加到tbody的容器中
	_tbody.append(_tr);	
}

/*
	创建表格
	@param jquery对象 eleHead  表格头部容器
	@param jquery对象 eleBody  表格body容器
	@param array thList 表格头部数据
	@param array tdList 表格body数据
	@param array status 表格状态数组(没有则默认全部显示)
*/
function addFullTr(eleHead, eleBody, thList, tdList, status) {
	if(arguments.length < 5) {
		var status = new Array();
		for(var i = 0; i < thList.length; i++) {
			status.push(1);
		}
	}
	var arrNewTd = getArrTd(status, tdList);
	addTr(eleHead, arrNewTd);	
	addTr(eleBody, arrNewTd);

	setTblWidth(eleHead, eleBody);	
}


/*
	更新表格的特定的单元格的值
	@param 表格头部容器 tblHd
	@param 表格内容容器 tblBd
	@param 对象数组 list 存储更新表格的行列以及对应的值
	{row:, col:, val:} row行号， col列号， val值
*/
function updataTbl(tblHd, tblBd, list) {
	var _hdTbody = tblHd.find('tbody');	// 表格头部的tbody
	var _bdTbody = tblBd.find('tbody');	// 表格body的tbody

	// 遍历list给特定的位置重新定义文本值
	for(var i = 0; i < list.length; i++) {
		var row = list[i].row;
		var col = list[i].col;
		var value = list[i].val;
		_hdTbody.find('tr').eq(row).find('td').eq(col).text(value);
		_bdTbody.find('tr').eq(row).find('td').eq(col).text(value);
	}
}


/*
 * 根据页面中表格数据生成表格第一次默认加载50条
 * @param jquery tblHd 表格头部容器
 * @param jquery tblBd 表格内容容器
 * @param array thList 表格头部数据
 * @param array tdList 所有的表格数据(全部查询出来)
 * @param array status 表格状态数组(没有则默认全部显示)
 *  
 */
function createTblByAllData(tblHd, tblBd, thList, tdList, status) {
	if(arguments.length < 5) {
		var status = new Array();
		for(var i = 0; i < thList.length; i++) {
			status.push(1);
		}
	}
	
	// 判断容器内是否有表格,如果不存在就截取表格数据的前50行数据进行创建表格
	if(tblBd.find('table').length == 0) {
		var newTdList = getArrTdList();
		createFullTbl(tblHd, tblBd, thList, newTdList, status);
	}
	
	
}

/*
 *根据行号和获取行数获取td的数据
 *@param array thList 表格的头部数据
 *@param array tdList 所有的表格数据(全部查询出来)
 *@param int row 当前的行号
 *@param int rows 要添加的行数
 */
function getArrTdList(thList, tdList, row, rows) {
	var tdList =new Array();
	
}