js下新建t口怎样操作

Question

如题所述

Answer 1

常用的对象 方法有创建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; } 本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。