javascript操作表格
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。
1、inserRow()和insertCell()函数
insertRow()函数可以带参数,形式如下:
insertRow(index):index从0开始
这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。一般我们在使用的时候都是:objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行。
insertCell()和insertRow的用法相同,这里就不再说了。
2、deleteRow()和deleteCell()方法
deleteRow()函数可以带参数,形式如下:deleteRow(index):index从0开始
和上面两个方法差不多的意思,就是删除指定位置的行和单元格。要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除:
- var row=document.getElementById("行的Id");
- var index=row.rowIndex;//有这个属性,嘿嘿
- objTable.deleteRow(index);
在使用过程中我碰到的一个问题跟大家说一下,就是删除表格的行的时候,如果你删除了某一行,那么表格行数是马上就变化的,所以如果你要删除表格的所有行,下面的代码是错误的:
- function clearRow(){
- objTable= document.getElementById("myTable");
- for( var i=1; i<objTable.rows.length ; i++ )
- {
- tblObj.deleteRow(i);
- }
- }
这段代码要删除原来的表格的表体,有两个问题。首先不能是deleteRow(i),应该是deleteRow(1)。因为在删除表格行的时候,表格的行数在变化,这就是问题的关键,rows.length总是在变小,删除的行数总是会比预想的要少一半,所以正确的删除表格的行的代码应该这样:
- function clearRow(){
- objTable= document.getElementById("myTable");
- var length= objTable.rows.length ;
- for( var i=1; i<length; i++ )
- {
- objTable.deleteRow(1);
- }
- }
3、动态设置单元格与行的属性
A、采用setAttribute()方法,格式如下:setAttribute(属性,属性值)
说明:这个方法几乎所有的DOM对象都可以使用,第一个参数是属性的名称,比如说:border,第二个就是你要为border设置的值了,比如:1
- var objMyTable = document.getElementById("myTable");
- objMyTable.setAttribute("border",1);//为表格设置边框为1
其他的比如你要为一个TD设置高度,同样先取得这个TD对象,然后使用setAttribute()方法
- var objCell = document.getElementById("myCell");
- objCell.setAttribute("height",24);//为单元格设置高度为24
在使用的时候遇到一个设置样式的问题,不能用setAttribute("class","inputbox2");而应该使用setAttribute("className","inputbox2"),呵呵,其他我估计也有同样的问题,有些属性和我们在DW里面的不一致,呵呵,大家自己摸索吧。
B、直接赋值
- var objMyTable = document.getElementById("myTable");
- objMyTable.border=1;//为表格设置边框为1
这个方法也全部适用,呵呵。
4、创建表格
了解了行<tr>与单元格<td>的增删那就可以创建表格了。
第一步:你需要有一个你去动态变化的表格,我这里讲的是已经存在页面的表格,我们要设置一个id:myTable
- var objMyTable = document.getElementById("myTable");
第二步:创建行与列的对象
- var index = objMyTable.rows.length-1;
- var nextRow = objMyTable.insertRow(index);//要新增的行,我这里是从倒数第二行开始新增的
- //单元格箱号
- var newCellCartonNo = nextRow.insertCell();
- var cartonNoName = "IptCartonNo";
- newCellCartonNo.innerHTML = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
- newCellCartonNo.setAttribute("className","tablerdd");
这样就搞定了,可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子,不过方法就大概是上面的了,呵呵
appendChild()方法
我就直接贴代码了,大家去研究,时间紧,哈哈,见谅~
例一:
- <html>
- <head>
- <title>My Test Page</title>
- <mce:script type="text/javascript"><!--
- var textNumber = 1;
- function addTextBox(form, afterElement) {
- // Increment the textbox number
- textNumber++;
- // Create the label
- var label = document.createElement("label");
- // Create the textbox
- var textField = document.createElement("input");
- textField.setAttribute("type","text");
- textField.setAttribute("name","txt"+textNumber);
- textField.setAttribute("id","txt"+textNumber);
- // Add the label's text
- label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
- // Put the textbox inside
- label.appendChild(textField);
- // Add it all to the form
- form.insertBefore(label,afterElement);
- return false;
- }
- function removeTextBox(form) {
- if (textNumber > 1) { // If there's more than one text box
- // Remove the last one added
- form.removeChild(document.getElementById("txt"+textNumber).parentNode);
- textNumber--;
- }
- }
- // --></mce:script>
- <mce:style type="text/css"><!--
- label {
- display:block;
- margin:.25em 0em;
- }
- --></mce:style><style type="text/css" mce_bogus="1">
- label {
- display:block;
- margin:.25em 0em;
- }</style>
- </head>
- <body>
- <form id="myForm" method="get" action="./" />
- <label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
- <p>
- <input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />
- <input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
- </p>
- <p><input type="Submit" value="Submit" /></p>
- </form>
- </body>
- </html>
例二:
- <html>
- <head>
- <title>My Test Page</title>
- <mce:script type="text/javascript"><!--
- var textNumber = 1;
- function addTextBox(form, afterElement) {
- // Increment the textbox number
- textNumber++;
- // Create the label
- var label = document.createElement("label");
- // Create the textbox
- var textField = document.createElement("input");
- textField.setAttribute("type","text");
- textField.setAttribute("name","txt"+textNumber);
- textField.setAttribute("id","txt"+textNumber);
- // Add the label's text
- label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
- // Put the textbox inside
- label.appendChild(textField);
- // Add it all to the form
- form.insertBefore(label,afterElement);
- return false;
- }
- function removeTextBox(form) {
- if (textNumber > 1) { // If there's more than one text box
- // Remove the last one added
- form.removeChild(document.getElementById("txt"+textNumber).parentNode);
- textNumber--;
- }
- }
- // --></mce:script>
- <mce:style type="text/css"><!--
- label {
- display:block;
- margin:.25em 0em;
- }
- --></mce:style><style type="text/css" mce_bogus="1">
- label {
- display:block;
- margin:.25em 0em;
- }</style>
- </head>
- <body>
- <form id="myForm" method="get" action="./" />
- <label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
- <p>
- <input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />
- <input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
- </p>
- <p><input type="Submit" value="Submit" /></p>
- </form>
- </body>
- </html>
例三:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <mce:script language="javascript"><!--
- // Example: obj = findObj("image1");
- function findObj(theObj, theDoc)
- {
- var p, i, foundObj;
- if(!theDoc) theDoc = document;
- if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
- { theDoc = parent.frames[theObj.substring(p+1)].document;
- theObjtheObj = theObj.substring(0,p);
- }
- if(!(foundObj = theDoc[theObj]) && theDoc.all)
- foundObj = theDoc.all[theObj];
- for (i=0; !foundObj && i < theDoc.forms.length; i++)
- foundObj = theDoc.forms[i][theObj];
- for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
- foundObj = findObj(theObj,theDoc.layers[i].document);
- if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
- return foundObj;
- }
- //添加一个参与人填写行
- function AddSignRow(){ //读取最后一行的行号,存放在txtTRLastIndex文本框中
- var txtTRLastIndex = findObj("txtTRLastIndex",document);
- var rowID = parseInt(txtTRLastIndex.value);
- var signFrame = findObj("SignFrame",document);
- //添加行
- var newTR = signFrame.insertRow(signFrame.rows.length);
- newTR.id = "SignItem" + rowID;
- //添加列:序号
- var newNameTD=newTR.insertCell(0);
- //添加列内容
- newNameTD.innerHTML = newTR.rowIndex.toString();
- //添加列:姓名
- var newNameTD=newTR.insertCell(1);
- //添加列内容
- newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />";
- //添加列:电子邮箱
- var newEmailTD=newTR.insertCell(2);
- //添加列内容
- newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />";
- //添加列:电话
- var newTelTD=newTR.insertCell(3);
- //添加列内容
- newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />";
- //添加列:手机
- var newMobileTD=newTR.insertCell(4);
- //添加列内容
- newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />";
- //添加列:公司名
- var newCompanyTD=newTR.insertCell(5);
- //添加列内容
- newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />";
- //添加列:删除按钮
- var newDeleteTD=newTR.insertCell(6);
- //添加列内容
- newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href="javascript:;" mce_href="javascript:;" onclick=/"DeleteSignRow('SignItem" + rowID + "')/">删除</a></div>";
- //将行号推进下一行
- txtTRLastIndex.value = (rowID + 1).toString() ;
- }
- //删除指定行
- function DeleteSignRow(rowid){
- var signFrame = findObj("SignFrame",document);
- var signItem = findObj(rowid,document);
- //获取将要删除的行的Index
- var rowIndex = signItem.rowIndex;
- //删除指定Index的行
- signFrame.deleteRow(rowIndex);
- //重新排列序号,如果没有序号,这一步省略
- for(i=rowIndex;i<signFrame.rows.length;i++){
- signFrame.rows[i].cells[0].innerHTML = i.toString();
- }
- }
- //清空列表
- function ClearAllSign(){
- if(confirm('确定要清空所有参与人吗?')){
- var signFrame = findObj("SignFrame",document);
- var rowscount = signFrame.rows.length;
- //循环删除行,从最后一行往前删除
- for(i=rowscount - 1;i > 0; i--){
- signFrame.deleteRow(i);
- }
- //重置最后行号为1
- var txtTRLastIndex = findObj("txtTRLastIndex",document);
- txtTRLastIndex.value = "1";
- //预添加一行
- AddSignRow();
- }
- }
- // --></mce:script>
- </HEAD>
- <BODY>
- <div>
- <table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">
- <tr id="trHeader">
- <td width="27" bgcolor="#96E0E2">序号</td>
- <td width="64" bgcolor="#96E0E2">用户姓名</td>
- <td width="98" bgcolor="#96E0E2">电子邮箱</td>
- <td width="92" bgcolor="#96E0E2">固定电话</td>
- <td width="86" bgcolor="#96E0E2">移动手机</td>
- <td width="153" bgcolor="#96E0E2">公司名称</td>
- <td width="57" align="center" bgcolor="#96E0E2"> </td>
- </tr>
- </table>
- </div>
- <div>
- <input type="button" name="Submit" value="添加参与人" onclick="AddSignRow()" />
- <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />
- <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
- </div>
- </BODY>
- </HTML>
例四:
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <mce:script language="javascript" type="text/javascript"><!--
- // 增加内容
- function messageSort() {
- var name = document.getElementById("message").value;
- if(name == "" ) return;
- var row = document.createElement("tr");
- row.setAttribute("id", name);
- var cell = document.createElement("td");
- cell.appendChild(document.createTextNode(name));
- row.appendChild(cell);
- var deleteButton = document.createElement("input");
- deleteButton.setAttribute("type", "button");
- deleteButton.setAttribute("value", "删除");
- deleteButton.onclick = function () { deleteSort(name); };
- cell = document.createElement("td");
- cell.appendChild(deleteButton);
- row.appendChild(cell);
- document.getElementById("sortList").appendChild(row);
- }
- // 删除内容
- function deleteSort(id) {
- var rowToDelete = document.getElementById(id);
- var sortList = document.getElementById("sortList");
- sortList.removeChild(rowToDelete);
- }
- // --></mce:script>
- </head>
- <body>
- <table border="0" cellspacing="0" width="400" bgcolor="#f5efe7">
- <tr>
- <td height="20">增加内容:</td>
- <td><input id="message" type="text"></td>
- <td><a href="javascript:messageSort();" mce_href="javascript:messageSort();">添加</a></td>
- </tr>
- </table>
- <table border="1" width="400">
- <tr>
- <td height="20" align="center">内容:</td>
- <td>操作</td>
- </tr>
- <tbody id="sortList"></tbody>
- </table>
- </body>
- </html>
- <html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
- <title>多个文件上传</title>
- <mce:style type="text/css"><!--
- BODY
- {
- PADDING-RIGHT: 0px;
- MARGIN-TOP: 0px;
- PADDING-LEFT: 0px;
- FONT-SIZE: 8px;
- MARGIN-LEFT: 0px;
- CURSOR: default;
- COLOR: black;
- MARGIN-RIGHT: 0px;
- PADDING-TOP: 0px;
- FONT-FAMILY: Arial;
- BACKGROUND-COLOR: transparent;
- TEXT-ALIGN: center
- }
- .TxtInput
- {
- FONT-SIZE: 8pt;
- WIDTH: 100%;
- CURSOR: default;
- COLOR: black;
- FONT-FAMILY: Arial;
- HEIGHT: 21px;
- BACKGROUND-COLOR: white;
- TEXT-ALIGN: left
- }
- .FieldLabel
- {
- FONT-WEIGHT: normal;
- FONT-SIZE: 9pt;
- WIDTH: 100%;
- COLOR: black;
- FONT-FAMILY: Arial;
- BACKGROUND-COLOR: transparent;
- TEXT-ALIGN: left
- }
- .HeadBtn
- {
- BORDER-RIGHT: black 1px solid;
- BORDER-TOP: white 1px solid;
- FONT-SIZE: 8pt;
- OVERFLOW: hidden;
- BORDER-LEFT: white 1px solid;
- WIDTH: 70px;
- COLOR: black;
- BORDER-BOTTOM: black 1px solid;
- FONT-FAMILY: Arial;
- HEIGHT: 21px;
- BACKGROUND-COLOR: #8e8dcd;
- TEXT-ALIGN: center
- }
- .TransEx
- {
- BORDER-RIGHT: black 1px solid;
- PADDING-RIGHT: 8px;
- BORDER-TOP: white 1px solid;
- PADDING-LEFT: 8px;
- FONT-SIZE: 8pt;
- PADDING-BOTTOM: 3px;
- BORDER-LEFT: white 1px solid;
- WIDTH: 720px;
- PADDING-TOP: 3px;
- BORDER-BOTTOM: black 1px solid;
- FONT-FAMILY: Arial;
- BACKGROUND-COLOR: #c0c0c0;
- TEXT-ALIGN: center
- }
- --></mce:style><style type="text/css" mce_bogus="1">
- BODY
- {
- PADDING-RIGHT: 0px;
- MARGIN-TOP: 0px;
- PADDING-LEFT: 0px;
- FONT-SIZE: 8px;
- MARGIN-LEFT: 0px;
- CURSOR: default;
- COLOR: black;
- MARGIN-RIGHT: 0px;
- PADDING-TOP: 0px;
- FONT-FAMILY: Arial;
- BACKGROUND-COLOR: transparent;
- TEXT-ALIGN: center
- }
- .TxtInput
- {
- FONT-SIZE: 8pt;
- WIDTH: 100%;
- CURSOR: default;
- COLOR: black;
- FONT-FAMILY: Arial;
- HEIGHT: 21px;
- BACKGROUND-COLOR: white;
- TEXT-ALIGN: left
- }
- .FieldLabel
- {
- FONT-WEIGHT: normal;
- FONT-SIZE: 9pt;
- WIDTH: 100%;
- COLOR: black;
- FONT-FAMILY: Arial;
- BACKGROUND-COLOR: transparent;
- TEXT-ALIGN: left
- }
- .HeadBtn
- {
- BORDER-RIGHT: black 1px solid;
- BORDER-TOP: white 1px solid;
- FONT-SIZE: 8pt;
- OVERFLOW: hidden;
- BORDER-LEFT: white 1px solid;
- WIDTH: 70px;
- COLOR: black;
- BORDER-BOTTOM: black 1px solid;
- FONT-FAMILY: Arial;
- HEIGHT: 21px;
- BACKGROUND-COLOR: #8e8dcd;
- TEXT-ALIGN: center
- }
- .TransEx
- {
- BORDER-RIGHT: black 1px solid;
- PADDING-RIGHT: 8px;
- BORDER-TOP: white 1px solid;
- PADDING-LEFT: 8px;
- FONT-SIZE: 8pt;
- PADDING-BOTTOM: 3px;
- BORDER-LEFT: white 1px solid;
- WIDTH: 720px;
- PADDING-TOP: 3px;
- BORDER-BOTTOM: black 1px solid;
- FONT-FAMILY: Arial;
- BACKGROUND-COLOR: #c0c0c0;
- TEXT-ALIGN: center
- }</style>
- <mce:script language="javascript"><!--
- function addFile(){
- }
- // --></mce:script>
- </head>
- <body>
- <form method="post" action="" name="upload" enctype="multipart/form-data" >
- <table class="Transex" border="0" cellspacing="0" cellpadding="0" style="WIDTH: 360px">
- <tr style="HEIGHT: 10px" >
- <td style="WIDTH: 5px"></td>
- <td colspan="2"></td>
- <td style="WIDTH: 5px"></td>
- </tr>
- <tr>
- <td></td>
- <td nowrap><label class="FieldLabel"> 文件1</label></td>
- <td><input type="file" class="TxtInput" name="file[]" style="WIDTH: 282px"></td>
- <td><img border="0" src="file:///G:/my%20picture/用例图片/GIF图标/0345290[1].gif" mce_src="file:///G:/my%20picture/用例图片/GIF图标/0345290[1].gif" width="16" height="16"></td>
- </tr>
- <tr style="HEIGHT: 5px">
- <td style="WIDTH: 5px">
- <td style="WIDTH: 350px" colspan="2"><hr width="100%"></td>
- <td style="WIDTH: 5px"></td>
- </tr>
- <tr>
- <td></td>
- <td colspan="2" align="left">
- <input type="submit" class="headbtn" align="center" name="submit" value="确定">
- <button tabindex="5" class="headbtn" align="center" name="btnCancel" id="btnCancel" onclick="window.close();">取消</button></td>
- <td></td>
- </tr>
- <tr style="HEIGHT: 5px">
- <td style="WIDTH: 5px">
- <td style="WIDTH: 350px" colspan="2"></td>
- <td style="WIDTH: 5px"></td>
- </tr>
- </table>
- </form>
- </body>
- </html>