HTML+JS兑现可编辑表格
日期：2014-05-17 浏览次数：20661 次
实现可视化编辑表格操作...
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=gb2312" />
<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>
<form id="form1" name="form1" method="post" action="">
<h3>可编辑的表格</h3>
<table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">
??? <tr>
????? <td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td>
????? <td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序号</td>
????? <td width="152" bgcolor="#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">商品名称</td>
????? <td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">数量</td>
????? <td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">单价</td>
????? <td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,###.00">合计</td>
??? </tr>
??? <tr>
????? <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td>
????? <td bgcolor="#FFFFFF">1</td>
????? <td bgcolor="#FFFFFF" Value="c">C</td>
????? <td bgcolor="#FFFFFF">0</td>
????? <td bgcolor="#FFFFFF">0</td>
????? <td bgcolor="#FFFFFF">0</td>
??? </tr>
??? <tr>
????? <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td>
????? <td bgcolor="#FFFFFF">2</td>
????? <td bgcolor="#FFFFFF" Value="d">D</td>
????? <td bgcolor="#FFFFFF">0</td>
????? <td bgcolor="#FFFFFF">0</td>
????? <td bgcolor="#FFFFFF">0</td>
??? </tr>
</table>
<br />
<input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" />
<input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" />
<input type="button" name="Submit22" value="重置" onclick="window.location.reload()" />
<input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />
</form>
<script language="javascript" src="GridEdit.js"></script>
<script language="javascript">
var tabProduct = document.getElementById("tabProduct");
// 设置表格可编辑
// 可一次设置多个，例如：EditTables(tb1,tb2,tb2,......)
EditTables(tabProduct);
</script>
</body>
</html>
//下面为引入所用的JS
GridEdit.js
/**
* JS实现可编辑的表格?
