Html+js实现表格可编辑,并能动态添加删除行 (赞)

原文出处:https://blog.csdn.net/qqliang1314/article/details/41850919 (建义阅读原文)
效果如下:
      功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容。
点击增加行,在table的末尾增加一行;点击删除行,删除table中最末尾的一行。
     


 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  5. <title>编辑表格数据</title>

  6. <style type="text/css">

  7. <!--

  8. body,div,p,ul,li,font,span,td,th{

  9. font-size:10pt;

  10. line-height:155%;

  11. }

  12. table{

  13. border-top-width: 1px;

  14. border-right-width: 1px;

  15. border-bottom-width: 0px;

  16. border-left-width: 1px;

  17. border-top-style: solid;

  18. border-right-style: solid;

  19. border-bottom-style: none;

  20. border-left-style: solid;

  21. border-top-color: #CCCCCC;

  22. border-right-color: #CCCCCC;

  23. border-bottom-color: #CCCCCC;

  24. border-left-color: #CCCCCC;

  25. }

  26. td{

  27. border-bottom-width: 1px;

  28. border-bottom-style: solid;

  29. border-bottom-color: #CCCCCC;

  30. }

  31. .EditCell_TextBox {

  32. width: 90%;

  33. border:1px solid #0099CC;

  34. }

  35. .EditCell_DropDownList {

  36. width: 90%;

  37. }

  38. -->

  39. </style>

  40. <script>

  41. /**

  42. * JS实现可编辑的表格

  43. * 用法:EditTables(tb1,tb2,tb2,......);

  44. * Create by Senty at 2008-04-12

  45. **/

  46.  
  47. //设置多个表格可编辑

  48. function EditTables(){

  49. for(var i=0;i<arguments.length;i++){

  50. SetTableCanEdit(arguments[i]);

  51. }

  52. }

  53.  
  54. //设置表格是可编辑的

  55. function SetTableCanEdit(table){

  56. for(var i=1; i<table.rows.length;i++){

  57. SetRowCanEdit(table.rows[i]);

  58. }

  59. }

  60.  
  61. function SetRowCanEdit(row){

  62. for(var j=0;j<row.cells.length; j++){

  63.  
  64. //如果当前单元格指定了编辑类型,则表示允许编辑

  65. var editType = row.cells[j].getAttribute("EditType");

  66. if(!editType){

  67. //如果当前单元格没有指定,则查看当前列是否指定

  68. editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");

  69. }

  70. if(editType){

  71. row.cells[j].onclick = function (){

  72. EditCell(this);

  73. }

  74. }

  75. }

  76.  
  77. }

  78.  
  79. //设置指定单元格可编辑

  80. function EditCell(element, editType){

  81.  
  82. var editType = element.getAttribute("EditType");

  83. if(!editType){

  84. //如果当前单元格没有指定,则查看当前列是否指定

  85. editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");

  86. }

  87.  
  88. switch(editType){

  89. case "TextBox":

  90. CreateTextBox(element, element.innerHTML);

  91. break;

  92. case "DropDownList":

  93. CreateDropDownList(element);

  94. break;

  95. default:

  96. break;

  97. }

  98. }

  99.  
  100. //为单元格创建可编辑输入框

  101. function CreateTextBox(element, value){

  102. //检查编辑状态,如果已经是编辑状态,跳过

  103. var editState = element.getAttribute("EditState");

  104. if(editState != "true"){

  105. //创建文本框

  106. var textBox = document.createElement("INPUT");

  107. textBox.type = "text";

  108. textBox.className="EditCell_TextBox";

  109.  
  110.  
  111. //设置文本框当前值

  112. if(!value){

  113. value = element.getAttribute("Value");

  114. }

  115. textBox.value = value;

  116.  
  117. //设置文本框的失去焦点事件

  118. textBox.onblur = function (){

  119. CancelEditCell(this.parentNode, this.value);

  120. }

  121. //向当前单元格添加文本框

  122. ClearChild(element);

  123. element.appendChild(textBox);

  124. textBox.focus();

  125. textBox.select();

  126.  
  127. //改变状态变量

  128. element.setAttribute("EditState", "true");

  129. element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);

  130. }

  131.  
  132. }

  133.  
  134.  
  135. //为单元格创建选择框

  136. function CreateDropDownList(element, value){

  137. //检查编辑状态,如果已经是编辑状态,跳过

  138. var editState = element.getAttribute("EditState");

  139. if(editState != "true"){

  140. //创建下接框

  141. var downList = document.createElement("Select");

  142. downList.className="EditCell_DropDownList";

  143.  
  144. //添加列表项

  145. var items = element.getAttribute("DataItems");

  146. if(!items){

  147. items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");

  148. }

  149.  
  150. if(items){

  151. items = eval("[" + items + "]");

  152. for(var i=0; i<items.length; i++){

  153. var oOption = document.createElement("OPTION");

  154. oOption.text = items[i].text;

  155. oOption.value = items[i].value;

  156. downList.options.add(oOption);

  157. }

  158. }

  159.  
  160. //设置列表当前值

  161. if(!value){

  162. value = element.getAttribute("Value");

  163. }

  164. downList.value = value;

  165.  
  166. //设置创建下接框的失去焦点事件

  167. downList.onblur = function (){

  168. CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);

  169. }

  170.  
  171. //向当前单元格添加创建下接框

  172. ClearChild(element);

  173. element.appendChild(downList);

  174. downList.focus();

  175.  
  176. //记录状态的改变

  177. element.setAttribute("EditState", "true");

  178. element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);

  179. }

  180.  
  181. }

  182.  
  183.  
  184. //取消单元格编辑状态

  185. function CancelEditCell(element, value, text){

  186. element.setAttribute("Value", value);

  187. if(text){

  188. element.innerHTML = text;

  189. }else{

  190. element.innerHTML = value;

  191. }

  192. element.setAttribute("EditState", "false");

  193.  
  194. //检查是否有公式计算

  195. CheckExpression(element.parentNode);

  196. }

  197.  
  198. //清空指定对象的所有字节点

  199. function ClearChild(element){

  200. element.innerHTML = "";

  201. }

  202.  
  203. //添加行

  204. function AddRow(table, index){

  205. var lastRow = table.rows[table.rows.length-1];

  206. var newRow = lastRow.cloneNode(true);

  207. //计算新增加行的序号,需要引入jquery 的jar包

  208. var startIndex = $.inArray(lastRow,table.rows);

  209. var endIndex = table.rows;

  210.  table.tBodies[0].appendChild(newRow);

  211. newRow.cells[0].innerHTML=endIndex-startIndex;

  212. SetRowCanEdit(newRow);

  213. return newRow;

  214.  
  215. }

  216.  
  217.  
  218. //删除行

  219. function DeleteRow(table, index){

  220. for(var i=table.rows.length - 1; i>0;i--){

  221. var chkOrder = table.rows[i].cells[0].firstChild;

  222. if(chkOrder){

  223. if(chkOrder.type = "CHECKBOX"){

  224. if(chkOrder.checked){

  225. //执行删除

  226. table.deleteRow(i);

  227. }

  228. }

  229. }

  230. }

  231. }

  232.  
  233. //提取表格的值,JSON格式

  234. function GetTableData(table){

  235. var tableData = new Array();

  236. alert("行数:" + table.rows.length);

  237. for(var i=1; i<table.rows.length;i++){

  238. tableData.push(GetRowData(tabProduct.rows[i]));

  239. }

  240.  
  241. return tableData;

  242.  
  243. }

  244. //提取指定行的数据,JSON格式

  245. function GetRowData(row){

  246. var rowData = {};

  247. for(var j=0;j<row.cells.length; j++){

  248. name = row.parentNode.rows[0].cells[j].getAttribute("Name");

  249. if(name){

  250. var value = row.cells[j].getAttribute("Value");

  251. if(!value){

  252. value = row.cells[j].innerHTML;

  253. }

  254.  
  255. rowData[name] = value;

  256. }

  257. }

  258. //alert("ProductName:" + rowData.ProductName);

  259. //或者这样:alert("ProductName:" + rowData["ProductName"]);

  260. return rowData;

  261.  
  262. }

  263.  
  264. //检查当前数据行中需要运行的字段

  265. function CheckExpression(row){

  266. for(var j=0;j<row.cells.length; j++){

  267. expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");

  268. //如指定了公式则要求计算

  269. if(expn){

  270. var result = Expression(row,expn);

  271. var format = row.parentNode.rows[0].cells[j].getAttribute("Format");

  272. if(format){

  273. //如指定了格式,进行字值格式化

  274. row.cells[j].innerHTML = formatNumber(Expression(row,expn), format);

  275. }else{

  276. row.cells[j].innerHTML = Expression(row,expn);

  277. }

  278. }

  279.  
  280. }

  281. }

  282.  
  283. //计算需要运算的字段

  284. function Expression(row, expn){

  285. var rowData = GetRowData(row);

  286. //循环代值计算

  287. for(var j=0;j<row.cells.length; j++){

  288. name = row.parentNode.rows[0].cells[j].getAttribute("Name");

  289. if(name){

  290. var reg = new RegExp(name, "i");

  291. expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));

  292. }

  293. }

  294. return eval(expn);

  295. }

  296.  
  297. ///////////////////////////////////////////////////////////////////////////////////

  298. /**

  299. * 格式化数字显示方式

  300. * 用法

  301. * formatNumber(12345.999,'#,##0.00');

  302. * formatNumber(12345.999,'#,##0.##');

  303. * formatNumber(123,'000000');

  304. * @param num

  305. * @param pattern

  306. */

  307. /* 以下是范例

  308. formatNumber('','')=0

  309. formatNumber(123456789012.129,null)=123456789012

  310. formatNumber(null,null)=0

  311. formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12

  312. formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12

  313. formatNumber(123456789012.129,'#0.00')=123,456,789,012.12

  314. formatNumber(123456789012.129,'#0.##')=123,456,789,012.12

  315. formatNumber(12.129,'0.00')=12.12

  316. formatNumber(12.129,'0.##')=12.12

  317. formatNumber(12,'00000')=00012

  318. formatNumber(12,'#.##')=12

  319. formatNumber(12,'#.00')=12.00

  320. formatNumber(0,'#.##')=0

  321. */

  322. function formatNumber(num,pattern){

  323. var strarr = num?num.toString().split('.'):['0'];

  324. var fmtarr = pattern?pattern.split('.'):[''];

  325. var retstr='';

  326.  
  327. // 整数部分

  328. var str = strarr[0];

  329. var fmt = fmtarr[0];

  330. var i = str.length-1;

  331. var comma = false;

  332. for(var f=fmt.length-1;f>=0;f--){

  333. switch(fmt.substr(f,1)){

  334. case '#':

  335. if(i>=0 ) retstr = str.substr(i--,1) + retstr;

  336. break;

  337. case '0':

  338. if(i>=0) retstr = str.substr(i--,1) + retstr;

  339. else retstr = '0' + retstr;

  340. break;

  341. case ',':

  342. comma = true;

  343. retstr=','+retstr;

  344. break;

  345. }

  346. }

  347. if(i>=0){

  348. if(comma){

  349. var l = str.length;

  350. for(;i>=0;i--){

  351. retstr = str.substr(i,1) + retstr;

  352. if(i>0 && ((l-i)%3)==0) retstr = ',' + retstr;

  353. }

  354. }

  355. else retstr = str.substr(0,i+1) + retstr;

  356. }

  357.  
  358. retstr = retstr+'.';

  359. // 处理小数部分

  360. str=strarr.length>1?strarr[1]:'';

  361. fmt=fmtarr.length>1?fmtarr[1]:'';

  362. i=0;

  363. for(var f=0;f<fmt.length;f++){

  364. switch(fmt.substr(f,1)){

  365. case '#':

  366. if(i<str.length) retstr+=str.substr(i++,1);

  367. break;

  368. case '0':

  369. if(i<str.length) retstr+= str.substr(i++,1);

  370. else retstr+='0';

  371. break;

  372. }

  373. }

  374. return retstr.replace(/^,+/,'').replace(/\.$/,'');

  375. }

  376. </script>

  377. </head>

  378.  
  379. <body>

  380. <form id="form1" name="form1" method="post" action="">

  381. <h3>可编辑的表格</h3>

  382. <table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">

  383. <tr>

  384. <td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td>

  385. <td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序号</td>

  386. <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>

  387. <td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">数量</td>

  388. <td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">单价</td>

  389. <td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,###.00">合计</td>

  390. </tr>

  391. <tr>

  392. <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td>

  393. <td bgcolor="#FFFFFF">1</td>

  394. <td bgcolor="#FFFFFF" Value="c">C</td>

  395. <td bgcolor="#FFFFFF">0</td>

  396. <td bgcolor="#FFFFFF">0</td>

  397. <td bgcolor="#FFFFFF">0</td>

  398. </tr>

  399. <tr>

  400. <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td>

  401. <td bgcolor="#FFFFFF">2</td>

  402. <td bgcolor="#FFFFFF" Value="d">D</td>

  403. <td bgcolor="#FFFFFF">0</td>

  404. <td bgcolor="#FFFFFF">0</td>

  405. <td bgcolor="#FFFFFF">0</td>

  406. </tr>

  407. </table>

  408.  
  409. <br />

  410. <input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" />

  411. <input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" />

  412. <input type="button" name="Submit22" value="重置" onclick="window.location.reload()" />

  413. <input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />

  414. </form>

  415.  
  416. <script language="javascript" src="GridEdit.js"></script>

  417. <script language="javascript">

  418. var tabProduct = document.getElementById("tabProduct");

  419.  
  420. // 设置表格可编辑

  421. // 可一次设置多个,例如:EditTables(tb1,tb2,tb2,......)

  422. EditTables(tabProduct);

  423.  
  424.  
  425. </script>

  426. </body>

  427. </html>

展开阅读全文

没有更多推荐了,返回首页