javascript操作表格（二）

动态添加DOM元素

最新推荐文章于 2024-05-24 08:56:19 发布

原创最新推荐文章于 2024-05-24 08:56:19 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #CSS #HTML #Microsoft #ViewUI

javascript基础专栏收录该内容

11 篇文章

订阅专栏

本文通过四个实例展示了如何使用JavaScript动态地创建和添加DOM元素到网页中，并提供了删除元素的方法。涉及的技术包括创建新元素、设置属性、插入节点等。

appendChild()方法

我就直接贴代码了，大家去研究，时间紧，哈哈，见谅~

例一：

<html> 
<head> 
<title>My Test Page</title> 
<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--; 
} 
} 
//--> 
</script> 
<style type="text/css"> 
<!-- 
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> 
<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--; 
} 
} 
//--> 
</script> 
<style type="text/css"> 
<!-- 
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>

<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;   
	     theObj = 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:;' 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();
	}
}
</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">
<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);
}
</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();">添加</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>
<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
}
-->
</style>
<script language="javascript">
	function addFile(){
	
		
	}
</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" 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>