js项目实战（弹性预算规则）

来源：互联网发布：java服务器高并发编辑：程序博客网时间：2024/05/29 15:19

js项目实战（弹性预算规则）

HTML代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"><title>Untitled Document</title><script src="util.js"></script></head><body><table  width="100%" height="100%"  border = "1"    ><tr><td align="center"  ><input type="button"  value="删除"   onclick="delRow();"  ></td><td align="center"  >弹性预算规则：<input type="button"  value="添加"  onclick="addRow();"    ></td></tr><tr><table   id="table1" width="100%" height="100%"  border = "1"  ><tr id="tr0" ><td align="center"  > </td><th align="center"  >编码</th><th align="center"  >弹性计算规则</th><th align="center"  >摘要</th><th align="center"  >参数</th><th align="center"  >说明</th></tr><tr  id="tr1"><td align="center"  ><input type="checkbox"   name="cb1" value="111"  onclick="chaValue(this);" ></td><td align="center"  >111</td><td align="center"  >按人均标准求和</td><td align="center"  >办公用品人月每月10元</td><td align="center"  >com.bjsxt.test</td><td align="center"  >办公用品预算科目弹性预算</td></tr><tr  id="tr2"><td align="center"  ><input type="checkbox"  name="cb1" value="112"  onclick="chaValue(this);"  ></td><td align="center"  >112</td><td align="center"  >按人均标准求差</td><td align="center"  >办公用品人月每月1000元</td><td align="center"  >com.bjsxt.test</td><td align="center"  >办公用品预算科目弹性预算</td></tr></table></tr></table></body></html><script>//获取表格对象var table1=$("#table1");//在表格后添加一行 ，第一列是checkbox，后面是空function addRow(){//创建新的一行var newTr=table1.insertRow(table1.rows.length);//用来装新的列元素var newTds=[];//添加每一列  并装在列元素的数组里面for(var i=0;i<6;i++){var newTd=newTr.insertCell(i);//给列元素设置居中newTd.align="center";newTds.push(newTd);}//给第一列 设置为 一个checkbox 元素  结构同之前的newTds[0].innerHTML='<input type="checkbox"   name="cb1" value="111"  onclick="chaValue(this);" >';}//删除选中的行元素function delRow(){//获取所有的checkboxvar checks=$("cb1");//遍历所有的checkbox  找到选中的  并且删除该行for(var i=0;i<checks.length;i++){if(checks[i].checked){//找到所在的  行元素trvar tr=checks[i].parentNode.parentNode;//删除该行   tr.rowIndex 是行元素 所在下标table1.deleteRow(tr.rowIndex);i--;//因为前面的行 删除了  所有的行元素 下标  往前移了1位  所有i--}}}//如果选中  可以更改  文本的值   如果不选中  锁定文本的值function chaValue(obj){//判断checkbox 是否选中if(obj.checked){//找到checkbox所在的trvar parentTr=obj.parentNode.parentNode;for(var i=1;i<parentTr.cells.length;i++){//获取成为文本框之前  td内的 内容var innerValue=parentTr.cells[i].innerHTML;parentTr.cells[i].innerHTML='<input type="text" value="'+innerValue+'"/>';}}else{//找到checkbox所在的trvar parentTr=obj.parentNode.parentNode;for(var i=1;i<parentTr.cells.length;i++){//拿到td中的 input 标签的值var inputValue=getFirstChild(parentTr.cells[i]).value;//给对应td标签 设置值parentTr.cells[i].innerHTML=inputValue;}}}</script>

js代码：

/** * * @param idOrName  如果传入id  前面加上#   如果传入name  直接传入 * @returns {*}  返回元素节点  如果没找到 返回null */function $(idOrName){    var obj=null;    if(idOrName){        if(idOrName.charAt(0)=="#"){            obj=document.getElementById(idOrName.substring(1));        }else{            obj=document.getElementsByName(idOrName);        }    }    return obj;}/** * * @param parentNode  父节点 * @returns {Array}  所有的元素子节点 */function getChildNodes(parentNode){    var childs=parentNode.childNodes;    var newChilds=[];    for(var i=0;i<childs.length;i++){        if(childs[i].nodeType==1){            newChilds.push(childs[i]);        }    }    return newChilds;}/** * * @param parentNode 父节点 * @returns {*|Node}   第一个元素节点 */function getFirstChild(parentNode){    var firstChild=parentNode.firstChild;    if(firstChild.nodeType==3){        firstChild=firstChild.nextSibling;    }    return firstChild;}/** * * @param parentNode 父节点 * @returns {*|Node}   最后一个元素节点 */function getLastChild(parentNode){    var lastChild=parentNode.lastChild;    if(lastChild.nodeType==3){        lastChild=lastChild.previousSibling;    }    return lastChild;}/** * * @param node  元素节点 * @returns {*|Node}  返回下一个兄弟元素节点 */function getNextSibling(node){    var nextNode=node.nextSibling;    if(nextNode.nodeType==3){        nextNode=nextNode.nextSibling;    }    return nextNode;}/** * * @param node  元素节点 * @returns {*|Node}  返回前一个兄弟元素节点 */function getPreviousSibling(node){    var preNode=node.previousSibling;    if(preNode.nodeType==3){        preNode=preNode.previousSibling;    }    return preNode;}

0 0