怎么動態(tài)添加和刪除表格

1、 首頁| 空間| 新聞| 論壇| 博客| 下載| 讀書| 網(wǎng)摘| 書店| 程序員| 項目交易| 樂知教育| 網(wǎng)址 歡迎您：p1314520h|退出|登錄注冊|幫助 CSDN-CSDN社區(qū)-Web 開發(fā)-JavaScript 管理菜單 生成帖子 置頂 推薦 取消推薦 鎖定 解鎖 移動 編輯 刪除 帖子加分 帖子高亮 取消高亮 結(jié) 帖 發(fā) 帖 回 復(fù) 收藏 不顯示刪除回復(fù)顯示所有回復(fù)顯示星級回復(fù)顯示得分回復(fù) JAVASCRIPT動態(tài)增加表格,如何實現(xiàn)兩個input 值的計算結(jié)果問題點數(shù):200分，結(jié)帖人:lifelz888 lifelz888 (fe) 等級： 結(jié)帖率：40.00% 樓主發(fā)表于：2

2、008-07-10 17:05:56我要實現(xiàn)點選擇商品出現(xiàn)一個對話框,然后選擇對應(yīng)的商品放到表格相應(yīng)的內(nèi)容中,填寫了單價,數(shù)量之后能自動計算出總價,并在總價中顯示,請各位指導(dǎo)一下,謝謝. <form name=form1> <table> <tr> <td align=center> <table width=100% border="1" id="testTbl" bgcolor="#CCCCCC"> <tr> <td align=center width

3、=6%>選擇 </td> <td align=center width=6%>序列 </td> <td align=center width=8%>選擇商品 </td> <td align=center width=17%>產(chǎn)品名稱 </td> <td align=center width=17%>型號規(guī)格 </td> <td align=center width=11%>單價 </td> <td align=center width=11%>數(shù)

4、量 </td> <td align=center width=11%>總價 </td> </tr> </table> </td> </tr> <tr> <td>總計: <input type=text name="zjg"> </td> </tr> <tr> <td align=center> <input name='litif' type='hidden' value

5、="0" /> <input type=button onClick="addRow(testTbl)" value=新增> <input type=button value=刪除 class="del" onClick="delRow(testTbl)"> <input type=submit value="確定"> </td> </tr> </table> </form><script> /

6、* * 添加 */ function sett(table) form1.dj2.value="ni" function addRow(table) /獲得表格的行數(shù) var row = table.rows.length; /獲得表格的列數(shù) var cell = table.rows0.cells.length; /添加行 var newTr = table.insertRow(); newTr.bgcolor = "#ffffff" /添加列 for(var j=1;j <=cell;j+) var newTd = newTr.insertCe

7、ll(); add(newTd,j,row); /* *刪除行 */ function delRow(table) var cks = document.forms0.ck; if(cks!=undefined) if(cks.length=undefined) if(cks.checked) table.deleteRow(1); else for(var i=0;i <cks.length;i+) var ck = cksi; if(ck.checked) var number = i + 1; table.deleteRow(number); cks = document.form

8、s0.ck; /全部刪除時 if(cks=undefined) var row = table.rows.length; return; i-; trimNumber(table); /* *排號 */ function trimNumber(table) var rows = table.rows.length-1; for(var i=1;i <=rows;i+) var row = table.rowsi; row.cells1.innerText = i; var row = table.rows.length; /* *為列添加文本 */ function addText(ne

9、wTd,text) newTd.innerText = text; /* *為列添加標(biāo)簽 */ function addHTML(newTd,HTML) newTd.innerHTML = HTML; function add(newId,cell,row) if(cell=1) addHTML(newId," <input type='checkbox' value='"+(row+1)+"' name='ck'/>"); newId.align = "center" el

10、se if(cell=2) addText(newId,row); newId.align = "center" else if(cell=3) addHTML(newId," <input type='button' name='cpdj"+(row+1)+"' style='width:100%' value='單擊選擇商品' onClick='openss()' />"); else if(cell=6) addHTML(newId,&q

11、uot; <input type='text' name='dj"+(row+1)+"' style='width:100%;text-align:center'/>"); else if(cell=4) addHTML(newId," <input type='text' name='cpname"+(row+1)+"' style='width:100%;text-align:center'/>");

12、else if(cell=5) addHTML(newId," <input type='text' name='cpxh"+(row+1)+"' style='width:100%;text-align:center'/>"); else if(cell=7) addHTML(newId," <input type='text' name='sl"+(row+1)+"' style='width:100%;text-a

13、lign:center' />"); else if(cell=8) addHTML(newId," <input type='text' name='rt"+(row+1)+"' style='width:100%;text-align:center'/>"); newId.style.background = "#FFFFFF" </script> 對我有用0 丟個板磚0 引用 舉報 管理 TOP 回復(fù)次數(shù)：6 bhtfg538 (浪客

14、) 等級： #1樓 得分：40回復(fù)于：2008-07-10 17:14:29var newTd = newTr.insertCell(); 然后給沒個 newTd 一個id吧newTd.id="Num"+i;.newTd.id="Pri"+j;然后去計算 每個i*j 的價格你嘗試下 對我有用0 丟個板磚0 引用 舉報 管理 TOP 精華推薦：【散分】你是如何隱藏你的變量和屬性的 songpengasp (有問題先找百度、Google.) 等級： #2樓 得分：40回復(fù)于：2008-07-10 17:19:17選擇商品出現(xiàn)一個對話框,然后選擇對應(yīng)的商品彈出

15、網(wǎng)頁對話框吧var win = window.open(.);選擇頁面 window.returnValue = .window.close(); 對我有用0 丟個板磚0 引用 舉報 管理 TOP 精華推薦：JavaScript版俄羅斯方塊Easy Tetris實現(xiàn)原理 zhangshenqiu (45度向上傾斜) 等級： #3樓 得分：40回復(fù)于：2008-07-10 17:27:23我是來學(xué)習(xí)的 對我有用0 丟個板磚0 引用 舉報 管理 TOP 精華推薦：為什么像騰訊首頁、淘寶首頁CSS都是內(nèi)嵌的 gonxi 等級： #4樓 得分：40回復(fù)于：2008-07-11 09:07:21典型購物

16、車的需求,你參考下吧,很多商城代碼里都有的. 對我有用0 丟個板磚0 引用 舉報 管理 TOP 精華推薦：【分享】重新認(rèn)識IE盒模型bug lifelz888 (fe) 等級： #5樓 得分：0回復(fù)于：2008-07-11 14:09:26能給一個實際的例子嗎? 對我有用0 丟個板磚0 引用 舉報 管理 TOP 精華推薦：正則表達(dá)式 s_liangchao1s (溫故而知新) 等級： 4 #6樓 得分：40回復(fù)于：2008-07-11 17:16:30HTML code<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.0 Transitional/

17、EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <style>table border:1 solid red; border-collapse:collapsetd font-size:15px; width:140; border:1 solid blue p font-size:15px </style> </HEAD> <BODY> <TABLE id="otbl"> <TR> <

18、;TD>選擇</TD><TD>序列</TD><TD>選擇商品</TD><TD>產(chǎn)品名稱</TD><TD>型號規(guī)格</TD><TD>單價</TD><TD>數(shù)量</TD><TD>總價</TD> </TR> </TABLE> <br/> <p>總計:<INPUT TYPE="text" id="alltotal" value

19、=""></p> <INPUT TYPE="button" value="新增" onclick="_Insert()"> <INPUT TYPE="button" value="刪除" onclick="_Delete()"> <INPUT TYPE="button" value="確認(rèn)" > </BODY> <SCRIPT LANGUAGE=

20、"JavaScript"> <!- var num = 0; function $(sId) return document.getElementById(sId); /新增 function _Insert() num+; var otbl = $("otbl"); var newRow = otbl.insertRow(num); var newCell0 = newRow.insertCell(0); newCell0.innerHTML = "<INPUT TYPE='checkbox' name=&#

21、39;do' id='chk"+num+"'>" var newCell1 = newRow.insertCell(1); newCell1.innerHTML = num ; var newCell2 = newRow.insertCell(2); newCell2.innerHTML = "<INPUT TYPE='button' value='選擇商品' onClick='_Openss(this)'>" var newCell3 = newRow.

22、insertCell(3); newCell3.innerHTML = "<INPUT TYPE='text' id='oname'>" var newCell4 = newRow.insertCell(4); newCell4.innerHTML = "<INPUT TYPE='text' id='otype'>" var newCell5 = newRow.insertCell(5); newCell5.innerHTML = "<INPUT TY

23、PE='text' id='omon' onblur='_Check(this)'>" var newCell6 = newRow.insertCell(6); newCell6.innerHTML = "<INPUT TYPE='text' name='onum' onblur='_Check(this)'>" var newCell7 = newRow.insertCell(7); newCell7.innerHTML = "<IN

24、PUT TYPE='text' id='total'>" /刪除 function _Delete() var cks = document.getElementsByName('do'); cks.length=0 && alert("無商品可刪除"); for(var i =0;i<cks.length;i+) if(cksi.checked = true) $("otbl").deleteRow(i+1); _Delete(); _Sort(); /排序 func

25、tion _Sort() for(var j=1;j<$("otbl").rows.length;j+) $("otbl").rowsj.cells1.innerHTML=j; num = $("otbl").rows.length-1; /打開選擇商品列表 function _Openss(obj) var oval = window.showModalDialog("sel.html",null,"DialogWidth:300px;DialogHeight:200px"); obj.

26、parentNode.nextSibling.firstChild.value = oval; obj.parentNode.nextSibling.nextSibling.nextSibling.firstChild.focus(); / check這部分自己完善 function _Check(otxt) var num1 = otxt.value; var num2 = otxt.parentNode.previousSibling.firstChild.value; if(isNaN(otxt.value) alert('請輸入正確格式'); otxt.focus(); return false; if(="onum") otxt.parentNode.nextSibling.firstChild.value=num1*num2; /-> </SCRIPT></HTML>商品頁面 sel.htmlHTML code <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME=&