[转] 动态增加Table行

qjbtj999 · 发表于 2013-2-4 20:15:27

<!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">/*author:kevinemail:kevin_218@163.commsn:xiao-kevin@hotmail.comwebsite:http://www.bluekevin.com*/ 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" 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" value="add" /> <input name="del_btn" id="del_btn" type="button" class="button" value="del" /> <input name="save" id="save" type="button" class="button" value="save" /><br><table id="tab" ><tr><th width="5%"><input type="checkbox" id="delall" ></td><th width="40%">Name</td><th width="55%">value</td> </tr></table><p><input type="text" name="postString" id="postString"> </p></body></html>

		自动登录	找回密码
密码			立即注册

[转] 动态增加Table行

浏览过的版块