JavaScript动态增删改表格数据

朴灿烈づ我的快乐病毒、 2022-08-05 02:23 205阅读 0赞

1.  <!DOCTYPE html>  
    
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.          div \{ border: 1px solid \#0094ff; text-align: center; width: 420px; margin: 5px auto; \}  
    
8.    
    
9.          \#divNumEdit \{ float: right; width: 90px; border: 0px; margin: 0; \}  
    
10.   
    
11.         table \{ border-collapse: collapse; border: 1px solid \#0094ff; width: 400px; margin: 5px auto; text-align: center; \}  
    
12.   
    
13.         td \{ border: 1px solid \#0094ff; \}  
    
14.         input.count \{width:32px; text-align:center;\}  
    
15.         \#trTitle \{ font-weight: bolder; background-color: \#4cff00; \}  
    
16.     </style>     
    
17. </head>  
    
18. <body>  
    
19.     <div>          
    
20.         <input type="button" value="新增菜单" id="btnAddOption" οnclick="addMenuOption()" />  
    
21.         <label>菜单:</label>  
    
22.         <select id="selList">  
    
23.             <option>兰州拉面</option>  
    
24.             <option>肉夹馍</option>  
    
25.             <option>手撕包菜</option>  
    
26.             <option>西兰花炒蛋</option>  
    
27.         </select>  
    
28.         <label>数量</label>  
    
29.         <div id="divNumEdit">  
    
30.             <input type="button" value="+" οnclick="EditNum(this);" />  
    
31.             <label id="labelNum">0</label>  
    
32.             <input type="button" value="-" οnclick="EditNum(this)" />  
    
33.         </div>  
    
34.     </div>  
    
35.     <div>  
    
36.         <input type="button" value="新增订单" id="btnAddTr" οnclick="addRowData()" />  
    
37.     </div>  
    
38.     <table id="tbList">  
    
39.         <tr id="trTitle">  
    
40.             <td>序号</td>  
    
41.             <td>菜名</td>  
    
42.             <td>数量</td>  
    
43.             <td>编辑</td>  
    
44.         </tr>  
    
45.     </table>  
    
46.     <div>  
    
47.         <input type="checkbox" id="chkAll" οnclick="checkAll()" /><label for="chkAll">全选</label>  
    
48.         <a href="javascript:void(0)" οnclick="delCheckedRow()">删除选中</a>  
    
49.     </div>  
    
50.     <script>  
    
51.         var index = 1;  
    
52.         var table = document.getElementById("tbList");  
    
53.         var Name;  
    
54.         var Count;  
    
55.         var IsEditable = true;// 标示编辑操作是否可用.  
    
56.         function addMenuOption() \{  
    
57.             var name = prompt("请输入菜单名...");  
    
58.             if (name == null || name == "") return;//验证输入是否为空.  
    
59.             var op = document.createElement("option");  
    
60.             op.innerHTML = name;  
    
61.             document.getElementById("selList").appendChild(op);  
    
62.         \}//增加菜单  
    
63.         function EditNum(obj) \{  
    
64.             if (obj.value == "+") \{  
    
65.                 obj.nextElementSibling.innerHTML++;  
    
66.             \} else \{  
    
67.                 if (obj.previousElementSibling.innerHTML > 0)  
    
68.                     obj.previousElementSibling.innerHTML--;  
    
69.             \}  
    
70.         \}//编辑数量  
    
71.         function addRowData() \{  
    
72.             if (!IsEditable) return;  
    
73.             if (document.getElementById("labelNum").innerHTML == 0) \{ return; \}//如果数量为0,不增加行数据.  
    
74.             var tr = document.createElement("tr");  
    
75.             var tdId = document.createElement("td");  
    
76.             var tdName = document.createElement("td");  
    
77.             var tdCount = document.createElement("td");  
    
78.             var tdAction = document.createElement("td");  
    
79.             tdId.innerHTML = "<input type='checkbox' />" + index;  
    
80.             tdName.innerHTML = document.getElementById("selList").value;  
    
81.             tdCount.innerHTML = document.getElementById("labelNum").innerHTML;  
    
82.             tdAction.innerHTML = '<a href="javascript:;" οnclick="editRowData(this)">编辑</a> <a href="javascript:;" οnclick="delRowData(this)">删除</a>';  
    
83.             tr.appendChild(tdId);  
    
84.             tr.appendChild(tdName);  
    
85.             tr.appendChild(tdCount);  
    
86.             tr.appendChild(tdAction);  
    
87.             table.appendChild(tr);  
    
88.             index++;//增加序号.  
    
89.         \}//添加行数据.  
    
90.         function delRowData(obj) \{  
    
91.             table.removeChild(obj.parentNode.parentNode);  
    
92.         \}//删除行数据.  
    
93.         function editRowData(obj) \{  
    
94.             if (!IsEditable) return;  
    
95.             var tr = obj.parentNode.parentNode;  
    
96.             Name = tr.children\[1\].innerHTML;  
    
97.             Count = tr.children\[2\].innerHTML;  
    
98.             tr.children\[1\].innerHTML = "<select>" + document.getElementById("selList").innerHTML + "</select>";  
    
99.             tr.children\[1\].children\[0\].value = Name;  
    
100.             tr.children\[2\].innerHTML = '<input type="text" class="count" value="' + Count + '"/>';  
    
101.             tr.children\[3\].innerHTML = '<a href="javascript:;" οnclick="saveEdit(this)">保存</a> <a href="javascript:;" οnclick="cancelEdit(this)">取消</a>';  
    
102.             IsEditable = false;  
    
103.         \}//编辑行数据  
    
104.         function cancelEdit(obj) \{  
    
105.             var tr = obj.parentNode.parentNode;              
    
106.             tr.children\[1\].innerHTML = Name;  
    
107.             tr.children\[2\].innerHTML = Count;  
    
108.             tr.children\[3\].innerHTML = '<a href="javascript:;" οnclick="editRowData(this)">编辑</a> <a href="javascript:;" οnclick="delRowData(this)">删除</a>';  
    
109.             IsEditable = true;  
    
110.         \}//取消编辑  
    
111.         function saveEdit(obj) \{  
    
112.             var tr = obj.parentNode.parentNode;  
    
113.             tr.children\[1\].innerHTML = tr.children\[1\].children\[0\].value;  
    
114.             tr.children\[2\].innerHTML = tr.children\[2\].children\[0\].value;  
    
115.             tr.children\[3\].innerHTML = '<a href="javascript:;" οnclick="editRowData(this)">编辑</a> <a href="javascript:;" οnclick="delRowData(this)">删除</a>';  
    
116.             IsEditable = true;  
    
117.         \}//保存编辑后的结果  
    
118.         function checkAll() \{  
    
119.             var ck = document.getElementById("chkAll").checked;             
    
120.             var tr;  
    
121.             for (var i = 1; i < table.children.length; i++) \{  
    
122.                 tr = table.children\[i\];  
    
123.                 tr.children\[0\].children\[0\].checked = ck;  
    
124.             \}  
    
125.         \}//全选  
    
126.         function delCheckedRow() \{  
    
127.             var tr;  
    
128.             var ck;  
    
129.             for (var i = table.children.length-1; i >=1; i--) \{  
    
130.                 tr = table.children\[i\];  
    
131.                 ck = tr.children\[0\].children\[0\].checked;  
    
132.                 if (ck) table.removeChild(tr);  
    
133.             \}  
    
134.         \}//删除选中行  
    
135.     </script>  
    
136. </body>  
    
137. </html>