JS动态增加删除行
方法一：
function addFile(){
filenum++;var table=document.getElementById("content");//找到table
var trid="trfile"+filenum;//将要添加的那一行的id
var file=table.insertRow(table.rows.length-1);//添加一行
//file.style.display="none";
file.id=trid;//设置该行的id,将来删除的时候要用
var td1=file.insertCell();//加一列到新插入的行
td1.className="newfile";
td1.innerHTML="File:";
var td2=file.insertCell();
td2.className="newfile";
var fileid="file(upload"+filenum+")";
/**
关键就是这一段,我这里插入的是一个file控件, 用来上传文档的.你自己换成textarea就可以.
*/
var t="<input type=""file"" size='50' name='"+fileid+"'"+"/><input type=""button"" value='Delete' onclick=""javascript:deleteFile('"+trid+"');""/>";
td2.innerHTML=t;
var uploadE=document.getElementById(fileid);
controlAddFileText();
if(uploadE.value.length>0){
file.style.display="block";
uploadE.focus();
uploadE.setActive();
}else{
//deleteFile(trid);
}
}
方法二：
<script language="JavaScript"> var intRowIndex = 0; function insertRow(tbIndex) { var T1="<input type=text name=kid"+tbIndex+" title=kid"+tbIndex+" value=0>" ; var T2="第"+(tbIndex+1)+"个小朋友"; var objRow = myTable.insertRow(tbIndex); var objCel = objRow.insertCell(0); objCel.innerHTML =T2; var objCel = objRow.insertCell(1); objCel.innerHTML = T1; objRow.style.background = "#F0F0FF"; } function deleteRow() { U=myTable.rows.length-1; if(U>0){ myTable.deleteRow(U); } else{ alert("至少有一位小朋友哦~") ; } } </script> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY onload="pos.innerText=intRowIndex;document.myForm.kid0.value=document.myForm.tt.value"> <form name="myForm"> 总苹果数<input type="text" name="tt" id="tt" value=100>当前位置：<span id="pos"></span><br><BR><BR> 分配人数-------指定分到苹果个数 <table id="myTable" border=1> <tr onclick="getIndex()"> <td>第1个小朋友</td> <td><input type=text name=kid0></td> </tr> </table> <input type="button" onclick="deleteRow()" value="减少一位">
方法三：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript"> function remove(){ var tr = tb.getElementsByTagName('tr'); var tl = tr.length; if(tl>2){ tb.removeChild(tr[tl-1]); tb['len']--; } } function get(){ var sum = parseInt($('input_sum').value), temp_n=0; for(var i=0;i<tb['len'];i++){ temp_n += parseInt($('kid_'+(i+1)).value); } if(temp_n>=sum)return 0; return (sum - temp_n); } function friend(s, o, r){ this.$ = function(o){return document.getElementById(o)}; this.obj = this.$(o); //表格对象 this.os = this.$(s); //总数 this.re = this.$(r); //移除 if(this.obj){//如果表格存在 if(this.obj.tagName.toLowerCase() != 'table'){//判断传的的对象是不是表格 alert(o+'对象不是一个表格！^_^'); }else{ this.bind();//绑定事件处理函数 } }else{ alert(o+'对象不存在！'); } } friend.prototype = { bind : function(){ var fri = this; if(this.os.value > 0){ this.add(this.os.value); } this.os.onkeydown = function(e){//在总数框内按回车，触发。因为我发现设置在onkeyup上的时候会有很多问题，下面的input也同样如此。 e = e || window.event; var w = e.which || e.keyCode; if(w==13){ if(this.value>0){ fri.add(this.value); } } } this.re.onclick = function(){ var vl = fri.getLen(); if(vl>1){ fri.$('kid_'+(vl-2)).value = fri.toNum(fri.$('kid_'+(vl-2)).value) + fri.toNum(fri.$('kid_'+(vl-1)).value); var tbody = fri.obj.getElementsByTagName('tbody')[0]; var trl = tbody.getElementsByTagName('tr'); tbody.removeChild(trl[trl.length-1]); fri.obj['len']--; alert("当前有"+fri.obj['len']+"位小朋友！"); } } }, add : function(v, f){ var tbody = this.obj.getElementsByTagName('tbody')[0]; var index = this.getLen(); //获得现有tr的个数 if(!f){ while(tbody.firstChild) tbody.removeChild(tbody.firstChild); index = 1; } var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = '第'+ index +'个小朋友'; var td2 = document.createElement('td'); var input = document.createElement('input'); input.name = 'kid_' + index; input.id = 'kid_' + index; input.value = v; input['old'] = v;//把默认值先保存起来 input.friend = this; input.onblur = this.check; input.onkeydown = function(e){ e = e || window.event; var w = e.which || e.keyCode; if(w==13){ this.friend.check.call(this); } } td2.appendChild(input); tr.appendChild(td1); tr.appendChild(td2); tbody.appendChild(tr); this.obj['len'] = index; input.focus(); input.select(); input = td1 = td2 = tr = tbody = null; }, check : function(){ var v1 = this.friend.toNum(this.value); var v2 = this.friend.toNum(this.friend.os.value); var v3 = this.friend.getValue(); if(v1>0 && v1 <= v2 && v3<=v2){ this['old'] = v1;//保存最后一次正确的值 if(v2-v3>0){ this.friend.add(v2-v3, true); } }else{ this.value = this['old'];//设置值为上一次正确的值 alert('您输入的数据不正确！'); this.focus(); //设置焦点 this.select();//选中文本 return false; } }, getLen : function(){ if(this.obj['len']){ return this.obj['len']+1; }else{ return 1; } }, getValue : function(){ var l = this.getLen(), tv = 0; for(var i=0; i<l-1; i++){ tv += this.toNum(this.$('kid_'+(i+1)).value); } return tv; }, toNum : function(s){ return Number(s)==isNaN?0:parseInt(s); } } window.onload = function (){ /* 第一个参数为，总数文本框的id值。第二个为表格的id值。第三个为，减少一位小朋友的id值 */ new friend('apple', 'myTable', 'remove_kid'); } </script> </head> <body> <form name="myForm"> <label for="apple">总苹果数</label><input type="text" name="tt" id="apple" value="100" /><br /><br /> 当前位置：<span id="pos"></span><br /><br /><br /> 分配人数-------指定分到苹果个数<br /> <table id="myTable" border="1"> </table> <input type="button" id="remove_kid" value="减少一位" /> </form> </body> </html> <input type="button" onclick="insertRow(myTable.rows.length)" value="增加一位小朋友" ></form>
