表格编辑表头多行并列多列并列

最新推荐文章于 2022-06-08 20:49:01 发布
最新推荐文章于 2022-06-08 20:49:01 发布
阅读量2.2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dusea/article/details/48224717
版权 
<!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>编辑表格数据</title>

<style type="text/css">
body,div,p,ul,li,font,span,td,th{font-size:10pt;line-height:155%;}
table{border-top-width:1px;border-right-width:1px;border-bottom-width:0px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:none;border-left-style:solid;border-top-color:#CCCCCC;border-right-color:#CCCCCC;border-bottom-color:#CCCCCC;border-left-color:#CCCCCC;}
td{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCCCCC;}
.EditCell_TextBox{width:90%;border:1px solid #0099CC;}
.EditCell_DropDownList{width:90%;}
</style>

</head>

<body>

<!div style="width:700px;margin:0 auto;">
	<form id="form1" name="form1" method="post" action="">
		<h3>可编辑的表格</h3>
		<div id="tablediv" style="OVERFLOW: auto;width:1330px;height:300x;">
		<table id="tabProduct" border="1" width="1000">
		<!table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">
		<tbody align="center">
		
		<tr class="tabTh">
				<td rowspan="3" colspan="2" width="100" nowrap="nowrap">险种大类</td>
				<td colspan="3" nowrap="nowrap">201401</td>
				<td colspan="3" nowrap="nowrap">201402</td>
				<td colspan="3" nowrap="nowrap">201403</td>
			</tr>
			<tr >
				<td colspan="3" nowrap="nowrap">保费收入-再保前</td>
				<td colspan="3" nowrap="nowrap">保费收入-再保前</td>
				<td colspan="3" nowrap="nowrap">保费收入-再保前</td>
			</tr>
			<tr >
				<td width="100" nowrap="nowrap" id="business" EditType="TextBox">业务</td>
				<td width="100" nowrap="nowrap" id="finance" EditType="TextBox">财务</td>
				<td width="100" nowrap="nowrap" id="difference" EditType="TextBox">差异</td>
				<td width="100" nowrap="nowrap" EditType="TextBox">业务</td>
				<td width="100" nowrap="nowrap" EditType="TextBox">财务</td>
				<td width="100" nowrap="nowrap" EditType="TextBox">差异</td>
				<td width="100" nowrap="nowrap" EditType="TextBox">业务</td>
				<td width="100" nowrap="nowrap" EditType="TextBox">财务</td>
				<td width="100" nowrap="nowrap" EditType="TextBox">差异</td>
			</tr>
			
			<tr >
				<td rowspan="3" width="100" nowrap="nowrap" >A大类大类</td>	
                <td nowrap="nowrap" EditType="TextBox">A1</td>					
				<td nowrap="nowrap" EditType="TextBox">1234</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>	
			<tr>	
			    <td nowrap="nowrap" EditType="TextBox">A2</td>	
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>	
			<tr>		
                <td nowrap="nowrap" EditType="TextBox">A3</td>				
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>				
			</tr>
			
			
			<tr class="tabTh">
				<td rowspan="2" width="100" nowrap="nowrap">B大类大类</td>	
                <td nowrap="nowrap" EditType="TextBox">B1</td>				
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>	
			<tr>	
			    <td nowrap="nowrap" EditType="TextBox">B2</td>	
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>	


			<tr class="tabTh">
				<td rowspan="3" width="100" nowrap="nowrap">A大类大类</td>	
                <td nowrap="nowrap" EditType="TextBox">A1</td>				
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>	
			<tr>	
			    <td nowrap="nowrap" EditType="TextBox">A2</td>	
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>	
			<tr>		
                <td nowrap="nowrap" EditType="TextBox">A3</td>				
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>				
			</tr>
			
			<tr class="tabTh">
				<td rowspan="5" width="100" nowrap="nowrap">D大类大类</td>	
                <td nowrap="nowrap" EditType="TextBox">D1</td>				
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>	
			<tr>	
			    <td nowrap="nowrap" EditType="TextBox">D2</td>	
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>	
			<tr>		
                <td nowrap="nowrap" EditType="TextBox">D3</td>				
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>				
			</tr>
			<tr>		
                <td nowrap="nowrap" EditType="TextBox">D4</td>				
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>				
			</tr>
			<tr>		
                <td nowrap="nowrap" EditType="TextBox">D5</td>				
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">1,550,703.52</td>
				<td nowrap="nowrap" EditType="TextBox">0</td>
				<td nowrap="nowrap" EditType="TextBox">33,253.36</td>
				<td nowrap="nowrap" EditType="TextBox">33,751.68</td>
				<td nowrap="nowrap" EditType="TextBox">-498.32</td>
				<td nowrap="nowrap" EditType="TextBox">359,825.44</td>
				<td nowrap="nowrap" EditType="TextBox">359,327.12</td>
				<td nowrap="nowrap" EditType="TextBox">498.32</td>			
			</tr>



			<tr>
			<td nowrap="nowrap">107T-车险（交强险）</td>
			<td nowrap="nowrap" EditType="TextBox">108,968,962.13</td>
			<td nowrap="nowrap" EditType="TextBox">108,968,962.13</td>
			<td nowrap="nowrap" EditType="TextBox">108,975,420.57</td>
			<td nowrap="nowrap" EditType="TextBox">-6,458.44</td>
			<td nowrap="nowrap" EditType="TextBox">59,672,975.8</td>
			<td nowrap="nowrap" EditType="TextBox">59,672,975.8</td>
			<td nowrap="nowrap" EditType="TextBox">0</td>
			<td nowrap="nowrap" EditType="TextBox">93,049,926.62</td>
			<td nowrap="nowrap" EditType="TextBox">93,048,446.62</td>
			<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>
			<tr>
			<td nowrap="nowrap">108T-车险（商业险）</td>
			<td nowrap="nowrap" EditType="TextBox">260,085,392.36</td>
			<td nowrap="nowrap" EditType="TextBox">108,968,962.13</td>
			<td nowrap="nowrap" EditType="TextBox">260,086,515.73</td>
			<td nowrap="nowrap" EditType="TextBox">-1,123.37</td>
			<td nowrap="nowrap" EditType="TextBox">131,815,686.81</td>
			<td nowrap="nowrap" EditType="TextBox">131,819,291.79</td>
			<td nowrap="nowrap" EditType="TextBox">-3,604.98</td>
			<td nowrap="nowrap" EditType="TextBox">211,276,060.23</td>
			<td nowrap="nowrap" EditType="TextBox">211,279,616.87</td>
			<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>
			<tr>
			<td nowrap="nowrap">109T-房屋险</td>
			<td nowrap="nowrap" EditType="TextBox">1,107,386.23</td>
			<td nowrap="nowrap" EditType="TextBox">108,968,962.13</td>
			<td nowrap="nowrap" EditType="TextBox">1,119,230.85</td>
			<td nowrap="nowrap" EditType="TextBox">-11,844.62</td>
			<td nowrap="nowrap" EditType="TextBox">369,424.34</td>
			<td nowrap="nowrap" EditType="TextBox">355,734.12</td>
			<td nowrap="nowrap" EditType="TextBox">13,690.22</td>
			<td nowrap="nowrap" EditType="TextBox">960,523.51</td>
			<td nowrap="nowrap" EditType="TextBox">968,921.8</td>
			<<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>
			<tr>
			<td nowrap="nowrap">110T-工程险</td>
			<td nowrap="nowrap" EditType="TextBox">52,470,322.9</td>
			<td nowrap="nowrap" EditType="TextBox">108,968,962.13</td>
			<td nowrap="nowrap" EditType="TextBox">52,507,149.28</td>
			<td nowrap="nowrap" EditType="TextBox">-36,826.38</td>
			<td nowrap="nowrap" EditType="TextBox">14,755,632.67</td>
			<td nowrap="nowrap" EditType="TextBox">14,755,852.67</td>
			<td nowrap="nowrap" EditType="TextBox">-220</td>
			<td nowrap="nowrap" EditType="TextBox">15,896,332.08</td>
			<td nowrap="nowrap" EditType="TextBox">16,042,977.52</td>
			<td nowrap="nowrap" EditType="TextBox">498.32</td>
			</tr>
			<tr class="tabTh">
				<td nowrap="nowrap">合计</td>		
				<td nowrap="nowrap" EditType="TextBox">108,968,962.13</td>				
				<td nowrap="nowrap" EditType="TextBox">753,959,667.45</td>
				<td nowrap="nowrap" EditType="TextBox">741,905,397.43</td>
				<td nowrap="nowrap" EditType="TextBox">12,054,270.02</td>
				<td nowrap="nowrap" EditType="TextBox">376,502,238.86</td>
				<td nowrap="nowrap" EditType="TextBox">388,700,315.28</td>
				<td nowrap="nowrap" EditType="TextBox">-12,198,076.42</td>
				<td nowrap="nowrap" EditType="TextBox">553,024,432.25</td>
				<td nowrap="nowrap" EditType="TextBox">554,140,700.32</td>
				<td nowrap="nowrap" EditType="TextBox">6,268.07</td>
			</tr>
		
		  </tbody>
		</table>
		<br />
		<input type="button" name="Submit" value="新增" οnclick="AddRow(document.getElementById('tabProduct'),1)" />
		<input type="button" name="Submit2" value="删除" οnclick="DeleteRow(document.getElementById('tabProduct'),1)" />
		<input type="button" name="Submit22" value="重置" οnclick="window.location.reload()" />
		<input type="submit" name="Submit3" value="提交" οnclick="GetTableData(document.getElementById('tabProduct'));return false;" />
	</form>
</div>

<script language="javascript">
//设置多个表格可编辑
function EditTables(){
	for(var i=0;i<arguments.length;i++){
	   SetTableCanEdit(arguments[i]);
	}
}

//设置表格是可编辑的
function SetTableCanEdit(table){
	for(var i=1; i<table.rows.length;i++){
	   SetRowCanEdit(table.rows[i]);
	}
}

function SetRowCanEdit(row){
	for(var j=0;j<row.cells.length; j++){
	
		//如果当前单元格指定了编辑类型，则表示允许编辑
		var editType = row.cells[j].getAttribute("EditType");
		if(!editType){
			//如果当前单元格没有指定，则查看当前列是否指定
			editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");
		}
		if(editType){
			row.cells[j].onclick = function (){
				EditCell(this);
			}
		}
	}

}

//设置指定单元格可编辑
function EditCell(element, editType){

	var editType = element.getAttribute("EditType");
	if(!editType){
	   //如果当前单元格没有指定，则查看当前列是否指定
	   editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");
	}

	switch(editType){
		case "TextBox":
		CreateTextBox(element, element.innerHTML);
		break;
		case "DropDownList":
		CreateDropDownList(element);
		break;
		default:
		break;
	}
}

//为单元格创建可编辑输入框
function CreateTextBox(element, value){
	//检查编辑状态，如果已经是编辑状态，跳过
	var editState = element.getAttribute("EditState");
	if(editState != "true"){
		//创建文本框
		var textBox = document.createElement("INPUT");
		textBox.type = "text";
		textBox.className="EditCell_TextBox";
		
		
		//设置文本框当前值
		if(!value){
			value = element.getAttribute("Value");
		}  
		textBox.value = value;
		
		//设置文本框的失去焦点事件
		textBox.onblur = function (){
			CancelEditCell(this.parentNode, this.value);
		}
		//向当前单元格添加文本框
		ClearChild(element);
		element.appendChild(textBox);
		textBox.focus();
		textBox.select();
		
		//改变状态变量
		element.setAttribute("EditState", "true");
		element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);
	}

}

//为单元格创建选择框
function CreateDropDownList(element, value){
	//检查编辑状态，如果已经是编辑状态，跳过
	var editState = element.getAttribute("EditState");
	if(editState != "true"){
		//创建下接框
		var downList = document.createElement("Select");
		downList.className="EditCell_DropDownList";
	
		//添加列表项
		var items = element.getAttribute("DataItems");
		if(!items){
			items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");
		}
	
		if(items){
			items = eval("[" + items + "]");
			for(var i=0; i<items.length; i++){
				var oOption = document.createElement("OPTION");
				oOption.text = items[i].text;
				oOption.value = items[i].value;
				downList.options.add(oOption);
			}
		}
	
		//设置列表当前值
		if(!value){
			value = element.getAttribute("Value");
		}
		downList.value = value;
	
		//设置创建下接框的失去焦点事件
		downList.onblur = function (){
			CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);
		}
	
		//向当前单元格添加创建下接框
		ClearChild(element);
		element.appendChild(downList);
		downList.focus();
		
		//记录状态的改变
		element.setAttribute("EditState", "true");
		element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);
	}

}


//取消单元格编辑状态
function CancelEditCell(element, value, text){
	element.setAttribute("Value", value);
	if(text){
		element.innerHTML = text;
	}else{
		element.innerHTML = value;
	}
	element.setAttribute("EditState", "false");

	//检查是否有公式计算
	CheckExpression(element.parentNode);
}

//清空指定对象的所有字节点
function ClearChild(element){
	element.innerHTML = "";
}

//添加行
function AddRow(table, index){
	var lastRow = table.rows[table.rows.length-1];
	var newRow = lastRow.cloneNode(true);
	table.tBodies[0].appendChild(newRow);
	SetRowCanEdit(newRow);
	return newRow;
}


//删除行
function DeleteRow(table, index){
	for(var i=table.rows.length - 1; i>0;i--){
		var chkOrder = table.rows[i].cells[0].firstChild;
		if(chkOrder){
			if(chkOrder.type = "CHECKBOX"){
				if(chkOrder.checked){
					//执行删除
					table.deleteRow(i);
				}
			}
		}
	}
}

//提取表格的值,JSON格式
function GetTableData(table){
	var tableData = new Array();
	alert("行数：" + table.rows.length);
	for(var i=1; i<table.rows.length;i++){
		tableData.push(GetRowData(tabProduct.rows[i]));
	}
	return tableData;
}

//提取指定行的数据，JSON格式
function GetRowData(row){
	var rowData = {};
	for(var j=0;j<row.cells.length; j++){
		name = row.parentNode.rows[0].cells[j].getAttribute("Name");
		if(name){
			var value = row.cells[j].getAttribute("Value");
			if(!value){
				value = row.cells[j].innerHTML;
			}
			rowData[name] = value;
		}
	}
	//alert("ProductName:" + rowData.ProductName);
	//或者这样：alert("ProductName:" + rowData["ProductName"]);
	return rowData;
}

//检查当前数据行中需要运行的字段
function CheckExpression(row){
	for(var j=0;j<row.cells.length; j++){
		expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");
		//如指定了公式则要求计算
		if(expn){
			var result = Expression(row,expn);
			var format = row.parentNode.rows[0].cells[j].getAttribute("Format");
			if(format){
				//如指定了格式，进行字值格式化
				row.cells[j].innerHTML = formatNumber(Expression(row,expn), format);
			}else{
				row.cells[j].innerHTML = Expression(row,expn);
			}
		}
	}
}

//计算需要运算的字段
function Expression(row, expn){
	var rowData = GetRowData(row);
	//循环代值计算
	for(var j=0;j<row.cells.length; j++){
		name = row.parentNode.rows[0].cells[j].getAttribute("Name");
		if(name){
			var reg = new RegExp(name, "i");
			expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));
		}
	}
	return eval(expn);
}

///
/** 
* 格式化数字显示方式   
* 用法 
* formatNumber(12345.999,'#,##0.00'); 
* formatNumber(12345.999,'#,##0.##'); 
* formatNumber(123,'000000'); 
* @param num 
* @param pattern 
*/ 
/* 以下是范例
formatNumber('','')=0
formatNumber(123456789012.129,null)=123456789012
formatNumber(null,null)=0
formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12
formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12
formatNumber(123456789012.129,'#0.00')=123,456,789,012.12
formatNumber(123456789012.129,'#0.##')=123,456,789,012.12
formatNumber(12.129,'0.00')=12.12
formatNumber(12.129,'0.##')=12.12
formatNumber(12,'00000')=00012
formatNumber(12,'#.##')=12
formatNumber(12,'#.00')=12.00
formatNumber(0,'#.##')=0
*/
function formatNumber(num,pattern){   
	var strarr = num?num.toString().split('.'):['0'];   
	var fmtarr = pattern?pattern.split('.'):[''];   
	var retstr='';   
	   
	// 整数部分   
	var str = strarr[0];   
	var fmt = fmtarr[0];   
	var i = str.length-1;     
	var comma = false;   
	for(var f=fmt.length-1;f>=0;f--){   
		switch(fmt.substr(f,1)){   
			case '#':   
			if(i>=0 ) retstr = str.substr(i--,1) + retstr;   
			break;   
			case '0':   
			if(i>=0) retstr = str.substr(i--,1) + retstr;   
			else retstr = '0' + retstr;   
			break;   
			case ',':   
			comma = true;   
			retstr=','+retstr;   
			break;   
		}   
	}   
	
	if(i>=0){   
		if(comma){   
			var l = str.length;   
			for(;i>=0;i--){   
				retstr = str.substr(i,1) + retstr;   
				if(i>0 && ((l-i)%3)==0) retstr = ',' + retstr;    
			}   
		}   
		else retstr = str.substr(0,i+1) + retstr;   
	}   
	   
	retstr = retstr+'.';   
	// 处理小数部分   
	str=strarr.length>1?strarr[1]:'';   
	fmt=fmtarr.length>1?fmtarr[1]:'';   
	i=0;   
	for(var f=0;f<fmt.length;f++){   
		switch(fmt.substr(f,1)){   
			case '#':   
			if(i<str.length) retstr+=str.substr(i++,1);   
			break;   
			case '0':   
			if(i<str.length) retstr+= str.substr(i++,1);   
			else retstr+='0';   
			break;   
		}   
	}
	return retstr.replace(/^,+/,'').replace(/\.$/,'');  
}  
</script>

<script type="text/javascript">
var tabProduct = document.getElementById("tabProduct");

// 设置表格可编辑
// 可一次设置多个，例如：EditTables(tb1,tb2,tb2,......)
EditTables(tabProduct);
</script>

</body>
</html>

dusea
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ext3.4.0复杂(多行)表头+锁定多列例子
09-09
Ext3.4.0复杂(多行)表头+锁定多列例子 非常棒，项目中需要使用到的。
【table】复杂表格示例，多行表头，包含横表头+纵表头
芳草萋萋鹦鹉洲哦
07-26 3430
【table】复杂表格示例，多行表头，包含横表头+纵表头
table多表头行布局
allenmu1982的博客
06-19 719
1 <table class="table table-border table-bordered table-bg table-striped"> 2 <tr class="text-c"> 3 <th style="background-color:#f1f1f1">角色名称</...
多行表头
ting2267的博客
04-01 922
说一下多行表头的用法和表签定义， 用标签定义表格的。该表签用于组合html表格的内容。thead元素应该于tbody和tfoot元素结合起来使用。Tbody元素用于对HTML表个中的主体内容进行分组，而tfoot元素用于对HTML表格中的表注内容（页脚）进行分组 thead、tfoot以及tbody元素可以实现对表格中的行进行分组。当我们创建某个表格时，也许希望实现一个标题行，一些带有数据的行，...
VFP GRID 合计行，与双层表头控件
10-17
VFP GRID 合计行，与双层表头控件
Antd表格之行/列合并
热门推荐
cc_百川
03-05 2万+
Antd--表格之行/列合并 注意：antd官方行/列合并参考：https://1x.ant.design/components/table/#components-table-demo-colspan-rowspan 表格行/列合并 表头只支持列合并，使用 column 里的 colSpan 进行设置。 表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpa...
mysql建三行三列表格_制作好的表格怎样才可以成重新编辑
weixin_36080653的博客
02-28 1028
buchesai2019-11-12 07:572848Word中表格编辑等技巧设计斜线表头将插入点定位在单元格中，单击“表格→绘制斜线表头”命令，出现对话框，单击“表头样式”下拉菜单选择一种样式(共有5种可选择)，分别填入“行标 题”(右上角的项目)、“列标题”(左下角的项目)和“数据标题”(中间格的项目)以及“字体大小”等，最后单击“确定”退出。删除斜线表头的方法是，单 击要删除的斜线表头，当...
ag-grid 学习笔记二：常用功能（多表头、固定列、宽度设置和位置、数据筛选器、表格编辑）
【爱打盹的喵】的专栏
06-09 1万+
目录 一 多表头 二 固定列 三 拖动改变列的宽度和位置 四 数据筛选器 五 编辑表格 六 所有代码 一 多表头 1.合并两层表头 合并表头，在第一层表头下加children子项即可。例如： //定义表格列 var columnDefs = [ { headerName: '分组A', children: [ { he...
在 Vue3 + Element Plus 中生成动态表格，动态修改表格，多级表头，合并单元格
蒋川@卡拉云
06-08 1万+
在 Vue 中，表格组件是使用频率及复杂度排名第一的组件，前端经常需要根据后台返回的数据动态渲染表格，比如动态表格如何生成，因为表格的列并不是固定的，在未知表格具体有哪些列的场景下，前端如何动态渲染表格数据。又或者需要把表格单元格进行合并处理，比如第一列是日期，需要把相同的日期进行合并，这样表格看起来会更加清晰。 本文手把手教你如何在 Vue3 + Element Plus 中创建表格、生成动态表格、创建动态多级表头、表格行合并、列合并等问题。如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云
多表头可配置在线EXCEL
06-08
基于多表头的在线EXCEL前端设计 1、多行表头 2、动态加载数据 3、单元格合并 4、编辑后自动预留空行及空行初始值 5、基于handsontable 详细介绍请点击http://blog.csdn.net/wynan830/article/details/9054195
qt 表格多行表头，复杂表头
01-05
占用两行数据，利用合并表格功能实现多行表头
vue表格实现固定表头首列
11-02
vue移动端项目 一个可以固定表头首列的表格 ，没有使用UI插件。 感兴趣的朋友可以参考下，希望对大家有所帮助
QT表头支持多列显示，功能强大
04-02
QT表头支持多列显示，功能强大，代码有点难度，下载的同学好好研究一下，并且字体显示有乱码，自行解决，不影响功能
常规表格多表头查询示例
09-04
主要介绍了常规表格多表头查询,需要的朋友可以参考下
java 生成 pdf 标题 表格 注释 合并
weixin_43554678的博客
08-14 1319
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
momeycheck_3.3.rar_发薪系统软件_多行表头_多表格_工资条
09-22
工资条查询系统，考虑到会计发工资时一般都用Excel电子表格，本asp程序，是基于Excel文件的工资条查询系统，免去了数据库转换，并可以读取各种多行表头的数据。 1、工资条查询系统 3.2(把excel当作数据库) (1(对...
angular8 实现table表格表头固定
立青的博客
01-02 1821
最近项目中有个需求，表头固定，内部实现滚动条。除了单个表头，还有多个表头的情况。 效果图： 直接贴出github项目地址，需要的可以点击访问
node-v7.2.0-linux-arm64.tar.xz
最新发布
05-08
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
excel表头多行拆分表格
10-28
在Excel中，表头多行拆分表格可以通过以下步骤实现： 1. 打开Excel表格，在需要拆分的表头下方创建新的行作为拆分的位置。 2. 将原有的多行表头复制到新创建的行中，每个单元格只包含一行表头信息。 3. 在新的行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值