javascript創(chuàng)建動態(tài)表單的方法
更新時間:2015年07月25日 18:00:50 作者:紅顏為君笑
這篇文章主要介紹了javascript創(chuàng)建動態(tài)表單的方法,實(shí)例分析了javascript動態(tài)操作頁面表單元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實(shí)例講述了javascript創(chuàng)建動態(tài)表單的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title></title> <style> #tab { border:1px solid #aaa; border-collapse:collapse; width:80%; } #tab th{ border:1px solid #aaaaaa; background:#ECE9D8; border-collapse:collapse; padding:5px; text-align:left; } #tab td{ border:1px solid #d8d8d8; border-collapse:collapse; padding:5px; } .txt{ border:1px solid #888; background:#ECE9D8; } .checkBg{ border:1px solid #aaaaaa; background:#ECE9D8; } .checkTxt{ border:1px solid #aaa; background:##d8d8d8; } .button { border:1px solid #888;margin:5px 0px; width:80px;background:#ECE9D8;height:22px;line-height:22px; } </style> <script language="javascript" type="text/javascript"> function $(id) {return document.getElementById(id);} function $F(name){return document.getElementsByTagName(name);} function add(){ var otr = document.getElementById("tab").insertRow(-1); var checkTd=document.createElement("td"); checkTd.innerHTML = '<input type="checkbox" class="check" onclick="ccolor()" name="checkItem">'; var otd1 = document.createElement("td"); otd1.innerHTML = '<input type="text" class="txt" name="infoName_txt" id="infoName_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>'; var otd2 = document.createElement("td"); otd2.innerHTML = '<input type="text" class="txt" name="infoValue_txt" id="infoValue_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>'; otr.appendChild(checkTd); otr.appendChild(otd1); otr.appendChild(otd2); } function ccolor() { var c1 = document.getElementsByName('checkItem'); for(var i=0; i<c1.length; i++) if(c1[i].checked) { c1[i].parentNode.parentNode.className="checkBg"; c1[i].parentNode.nextSibling.firstChild.className="checkTxt"; c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt"; } else { c1[i].parentNode.parentNode.className=""; c1[i].parentNode.nextSibling.firstChild.className=""; c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";} } function del(){ var c = document.getElementsByName('checkItem'); var idArray = new Array(); for(var i=0; i<c.length; i++) if(c[i].checked) idArray.push(i); var rowIndex; var nextDiff =0; for(j=0;j< idArray.length;j++) { rowIndex = idArray[j]+1-nextDiff++; document.getElementById("tab").deleteRow(rowIndex); } } function save(){ var postString = $("postString"); var checkboxs = document.getElementsByName("checkItem"); var ttab = document.getElementsByName("infoName_txt"); var tt2 = document.getElementsByName("infoValue_txt"); var idArray = new Array(); for(i=0;i<checkboxs.length;i++) { idArray.push(ttab[i].value + "|" + tt2[i].value); } postString.value = idArray.join("-"); alert(postString.value); } function alldell() { var des =document.getElementsByName('checkItem'); for(var i=0;i<des.length;i++) { if(des[i].checked=document.getElementById('delall').checked){ des[i].parentNode.parentNode.className="checkBg"; des[i].parentNode.nextSibling.firstChild.className="checkTxt"; des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";} else{ des[i].parentNode.parentNode.className=""; des[i].parentNode.nextSibling.firstChild.className=""; des[i].parentNode.nextSibling.nextSibling.firstChild.className="";} } } </script> </head> <body> <input name="addv_btn" id="addv_btn" type="button" class="button" onClick="add();" value="add" /> <input name="del_btn" id="del_btn" type="button" class="button" onClick="del();" value="del" /> <input name="save" id="save" type="button" class="button" onClick="save();" value="save" /><br> <table id="tab" > <tr> <th width="5%"><input type="checkbox" id="delall" onclick="alldell()"></td> <th width="40%">Name</td> <th width="55%">value</td> </tr> </table> <p> <input type="text" name="postString" id="postString"> </p> </body> </html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js form action動態(tài)修改方法
- JavaScript動態(tài)創(chuàng)建form表單并提交的實(shí)現(xiàn)方法
- 用JS動態(tài)改變表單form里的action值屬性的兩種方法
- js動態(tài)生成form 并用ajax方式提交的實(shí)現(xiàn)方法
- Js為表單動態(tài)添加節(jié)點(diǎn)內(nèi)容的方法
- javascript實(shí)現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)
- javascript寫的一個表單動態(tài)輸入提示的代碼
- JavaScript實(shí)現(xiàn)動態(tài)增加文件域表單
- JavaScript實(shí)現(xiàn)動態(tài)添加Form表單元素的方法示例
相關(guān)文章
javascript實(shí)現(xiàn)模擬時鐘的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)模擬時鐘的方法,涉及javascript操作時間實(shí)時顯示的相關(guān)技巧,需要的朋友可以參考下2015-05-05一次圍繞setTimeout的前端面試經(jīng)驗(yàn)分享
這篇文章主要跟大家分享了一次圍繞setTimeout展開的前端面試經(jīng)驗(yàn),是一篇有意思的圍繞setTimeout展開的前端開發(fā)考題,考察了for循環(huán)、定時器setTimeout()、JavaScript閉包、匿名函數(shù)和Promise等,一不小心你可能就會做錯,快來看看你有沒有掌握了上面的知識。2017-06-06vite打包優(yōu)化vite-plugin-compression的使用示例詳解
這篇文章主要介紹了vite打包優(yōu)化vite-plugin-compression的使用,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09bootstrap導(dǎo)航、選項(xiàng)卡實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了bootstrap導(dǎo)航、選項(xiàng)卡的實(shí)現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12javascript table美化鼠標(biāo)滑動單元格變色
效果非常不錯的table美化,當(dāng)鼠標(biāo)滑過去,背景色變換效果2008-06-06