结合checkbox动态产生tr可分页完整版代码,JS代码库,德仔网

代码语言
代码分类
【JS】结合checkbox动态产生tr可分页完整版
作者:using / 发布于2012/10/22/ 824
<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></div>
<div><html xmlns="http://www.w3.org/1999/xhtml"></div>
<div><head></div>
<div><meta http-equiv="Content-Type" content="text/html; charset=GBK" /></div>
<div><meta name="Author" content="author by using 20121016 QQ:471116029"></div>
<div><title>差旅人选择</title></div>
<div></div>
<div><script language="JavaScript"></div>
<div></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>/* 已有差旅人JS， begin */</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>function changgeTriverRes(checks) {</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>var tempArr = checks.split("-");</div>
<div> <span class="Apple-tab-span" style="white-space:pre">		</span>certRow(tempArr[0],tempArr[1],tempArr[2],tempArr[3],tempArr[4]);</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>}
<div>  /* 创建新的一行 */</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>function certRow(args1,args2,args3,args4,args5)</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>{</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>document.getElementById("triveralDiv").style.display = "block";</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  <span class="Apple-tab-span" style="white-space:pre">	</span>var txtTRLastIndex = document.getElementById("certTRLastIndex");</div>
<div> <span class="Apple-tab-span" style="white-space:pre">		</span>var rowID = parseInt(txtTRLastIndex.value);</div>
<div> <span class="Apple-tab-span" style="white-space:pre">		</span>var MyTable = document.getElementById("certTable");</div>
<div> <span class="Apple-tab-span" style="white-space:pre">		</span>var newTr = MyTable.insertRow(MyTable.rows.length);</div>
<div> <span class="Apple-tab-span" style="white-space:pre">		</span>newTr.id = "certItem" + args1;</div>
<div> <span class="Apple-tab-span" style="white-space:pre">		</span>//添加5列</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  var newTd0 = newTr.insertCell(0);</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  var newTd1 = newTr.insertCell(1);</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  var newTd2 = newTr.insertCell(2);</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  var newTd3 = newTr.insertCell(3);</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  var newTd4 = newTr.insertCell(4);</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  var newTd5 = newTr.insertCell(5);</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  </div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  newTd0.innerHTML = '&nbsp;&nbsp;';</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  newTd1.innerHTML = '<div title="' + args2 + '" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:120px;cursor: pointer;">' + args2 + '</div>' + '<input type="hidden" id="checkedItem" name="checkedItem" value="' + args1 + '" />';</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  newTd2.innerHTML = '<div>' + args3 + '</div>';</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  newTd3.innerHTML = '<div>' + args4 + '</div>';</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  newTd4.innerHTML = '<div>' + args5 + '</div>';</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  newTd5.innerHTML = '<div><input type="hidden" id="tableRows" name="tableRows" value="certItem'+ rowID +'" /><input type="hidden" id="tableRows_'+args1+'" value="certItem'+ rowID +'" /><input type="button" value="删除" onclick="deliveryDeleteSignRow(\'certItem' + rowID + '\','+args1+'\);"/></div>';</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  txtTRLastIndex.value = (rowID + 1).toString();</div>
<div> <span class="Apple-tab-span" style="white-space:pre">		</span></div>
<div> <span class="Apple-tab-span" style="white-space:pre">		</span></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>}
<div><span class="Apple-tab-span" style="white-space:pre">	</span>function deliveryDeleteSignRow(rowid,userid){</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>var MyTable = document.getElementById("certTable");</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>var signItem = document.getElementById("certItem"+userid);</div>
<div></div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>var txtTRLastIndex = document.getElementById("certTRLastIndex");</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>var rowIDZ = parseInt(txtTRLastIndex.value);</div>
<div></div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>//获取将要删除的行的Index</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>var rowIndex = signItem.rowIndex;</div>
<div></div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>//删除指定Index的行</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>if (typeof(rowIndex) =="undefined")  {</div>
<div> <span class="Apple-tab-span" style="white-space:pre">			</span>rowIndex = rowIDZ+1;</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>}
<div><span class="Apple-tab-span" style="white-space:pre">		</span>MyTable.deleteRow(rowIndex);</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>txtTRLastIndex.value = (rowIDZ - 1).toString() ;</div>
<div></div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>/* 隐藏已有的差旅人列表DIV */</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>if(txtTRLastIndex.value == "0") {</div>
<div><span class="Apple-tab-span" style="white-space:pre">			</span>document.getElementById("triveralDiv").style.display = "none";</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>}
<div><span class="Apple-tab-span" style="white-space:pre">		</span>/* 取消子页面上对应的差旅人checkbox的勾 */</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>if(window.frames['iframeResult'].document.getElementById("checkedItem_"+userid) != null) {</div>
<div><span class="Apple-tab-span" style="white-space:pre">			</span>window.frames['iframeResult'].document.getElementById("checkedItem_"+userid).checked = false;</div>
<div><span class="Apple-tab-span" style="white-space:pre">			</span>window.frames['iframeResult'].checkFalse(); //去除顶部checkbox</div>
<div><span class="Apple-tab-span" style="white-space:pre">		</span>}
<div><span class="Apple-tab-span" style="white-space:pre">	</span>}
<div><span class="Apple-tab-span" style="white-space:pre">	</span>/* 已有差旅人JS， end */</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span></div>
<div></script></div>
<div></head></div>
<div><body></div>
<div><form action="" id="frm" method="post" name="frm"></div>
<div><div style="display: none" id="triveralDiv"></div>
<div> <table id="certTable" style="width:780px"></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  <tr height="10px;"></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>   <td><input name='certTRLastIndex' type='hidden' id='certTRLastIndex' value="0" /></td></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  </tr></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  <tr></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>    <span class="Apple-tab-span" style="white-space:pre">	</span><td>&nbsp;&nbsp;</td></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>    <td><font color="#065991">中文姓名</font></td></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>    <td><font color="#065991">英文姓名</font></td></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>    <td><font color="#065991">手机号码</font></td></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>    <td><font color="#065991">Email邮箱</font></td></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>    <td><font color="#065991">删除</font></td></div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>  </tr></div>
<div> </table></div>
<div></div></div>
<div></div>
<div><br/></div>
<div><br/></div>
<div><br/></div>
<div></div>
<div><!-- 差旅人查询结果 --可以调用数据库动态产生，使用iframe是为了，结果翻页的时候不把上面已经存在的差旅人列表给清空掉,也可以不是用iframe考虑ajax获取数据 --></div>
<div><iframe src="childPage.html" id="iframeResult" name="iframeResult" height="150" width="100%" scrolling="no" marginwidth="0" frameborder="0" style=""></iframe></div>
<div></div>
<div></form></div>
<div></body></div>
<div></html></div>
<div></div>
试试其它关键字
　checkbox　
同语言下
可能有用的
using贡献的其它代码(7)