在做报销流程时 需要用到JS 动态创建表格 ，控件 获取控件中的值。

　　常用的对象 方法有

　　创建

　　var tab1 = document.createElement("table");

　　获取 　

    　var Id = document.getElementById("tabHid").value;

　　这个 函数 初始化页面时，自动调用 。

　　如在页面中 使用 则 winows.onload= *** 不需带括号

　　window.onload = function init() { 　　createTab(); 　　createTbody(); 　　createHeaderTr(); 　　createTr(); 　　createTd(); 　　createTxtDate(); 　　createTxtDesc(); 　　createDescType(); 　　createTxtPrcie(); 　　createBtn(); 　　}

　　使用JS动态 创建控件 　

　　使用setAttribute 可很方便创建页面元素控件 　

　　如以下 创建一个宽300 高 100 的表格 他的样式属性 为 tdCss 　

　　其他 类似

　　function createTab() { 　　var tab1 = document.createElement("table"); 　　tab1.setAttribute("cellSpacing", 0); 　　tab1.setAttribute("cellPadding", 5); 　　tab1.setAttribute("width", 300); 　　tab1.setAttribute("height", 100); 　　tab1.setAttribute("className", "tdCss"); 　　tab1.setAttribute("id", "tabFund"); 　　tab1.setAttribute("bordy", 1); 　　document.getElementById("divDesc").appendChild(tab1); 　　return tab1; 　　} 　　 　　这个控件是 具有日期样式文本框控件 　　需要注意的是回调函数 还有必须把创建的控件 添加到使用页面的一个容器中去 　　否则报空对象 　　WdatePicker 　　 　　function createTxtDate() { 　　var Id = document.getElementById("tabHid").value; 　　var text1 = document.createElement("input"); 　　text1.setAttribute("id", "txtDate" + Id); 　　text1.setAttribute("className", "Wdate"); 　　text1.readOnly = true; 　　document.getElementById("tr" + Id + "td" + 1).appendChild(text1); 　　document.getElementById("txtDate" + Id).onfocus = function () { 　　WdatePicker({ skin: 'whyGreen', dateFmt: 'yyyy-MM-dd' }); 　　}; 　　return text1; 　　} 　　这是一个动态创建下拉列表控件的JS 　　function createDescType() { 　　var Id = document.getElementById("tabHid").value; 　　var selected = document.createElement("select"); 　　selected.setAttribute("id", "select" + Id); 　　selected.options.add(new Option("活动费", "活动费")); 　　document.getElementById("tr" + Id + "td" + 3).appendChild(selected); 　　return selected; 　　} 　　 　　function createBtn() { 　　var Id = document.getElementById("tabHid").value; 　　var btn1 = document.createElement("input"); 　　btn1.setAttribute("type", "button"); 　　btn1.setAttribute("id", "btnAdd" + Id); 　　btn1.setAttribute("value", "保存"); 　　document.getElementById("tr" + Id + "td" + 5).appendChild(btn1); 　　btn1.onclick = function () { 　　//if (chckNull(Id)) { 　　if (Id > 0) { 　　document.getElementById("btnAdd" + Id).style.display = "none"; 　　} 　　Id++; 　　document.getElementById("tabHid").value = Id; 　　createTr(); 　　createTd(); 　　createTxtDate(); 　　createTxtDesc(); 　　createDescType(); 　　createTxtPrcie(); 　　createBtn(); 　　getAllValue(); 　　// } 　　} 　　return btn1; 　　}

　　使用JS 判断填写资料是否为空 　

    　function chckNull(Id) { 　　var txtPrice = document.getElementById("txtPrice" + Id); 　　var b = true; 　　if (txtPrice.value == "" && txtPrice.value == null) { 　　alert("填写金额信息"); 　　b = false; 　　} 　　return b; 　　}

　   这个事利用页面隐藏域控件 传一个字符串 到后台分解成为需要的字符串数组 到字符串    

       　　 function getAllValue() { 　　var num = document.getElementById("tabHid").value; 　　var txtStr; 　　for (var i = 0; i < num; i++) { 　　txtStr += document.getElementById("txtDate" + i).value + "/"; 　　txtStr += document.getElementById("txtDesc" + i).value + "/"; 　　txtStr += document.getElementById("select" + i).value + "/"; 　　txtStr += document.getElementById("txtPrice" + i).value + "!"; 　　} 　　alert(txtStr); 　　document.getElementById("tabHid").value = 0; 　　document.getElementById("txtStrValue").value = txtStr; 　　} 　　　

　　本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。