JS操作表格实例-优快云博客

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js 操作table</title>

<script type="text/javascript">

var tb;
var lastIndex=0;
function AddSignRow()
{

	tb=tb|| document.getElementById("SignFrame");
	var tr=tb.insertRow(tb.rows.length);
	lastIndex++;
	if(document.all)
	{
	    var td;
	    var i=0;
	    td=tr.insertCell(i++);
	    td.innerHTML=lastIndex;
	    for(;i<=5;i++){
	          td=tr.insertCell(i);
	        td.innerHTML="<input type=text />";
	    }
	      td=tr.insertCell(i);
	      td.innerHTML="<input type='button' value='删除' οnclick='delRow(this)' />";
	}else{

	    tr.innerHTML = "<td >"+lastIndex+"</td><td ><input type=text /></td><td ><input type=text /></td><td ><input type=text /></td><td ><input type=text /></td><td ><input type=text /></td><td><input type='button' value='删除' οnclick='delRow(this)' /></td>";
    }
}
function ClearAllSign()
{	
	tb=tb|| document.getElementById("SignFrame");
	var inputs=tb.getElementsByTagName("input");
	for(var i=0;i<inputs.length;i++){
		if(inputs[i].type.toLowerCase()=='text'){
			inputs[i].value="";
		}
	}
}

function delRow(obj){
	obj = getParentRow(obj);
	if(obj){
		obj.parentNode.removeChild(obj);
	}
}

function getParentRow(obj)
{
	var r = obj.parentNode; 
    while(r!=null && r.tagName!="TR") { 
         r = r.parentNode; 
    } 
    return r; 
}
function DeleteAll(){
    tb=tb|| document.getElementById("SignFrame");
    if(document.all)
    {
        for(var i=tb.childNodes.length-1;i>=0;i--){
            tb.removeChild(tb.childNodes[i]);
        }
    }else{
        tb.innerHTML="";
    }
    lastIndex=0;
}

function disPlayCell(t,c,isDisplay)
{   
    c=parseInt(c);
    if(t && t.rows && t.rows.length >0)
    {
        for(var i=0;i<t.rows.length;i++)
        {
            if(c<t.rows[i].cells.length)
            {
                t.rows[i].cells[c].style.display= isDisplay?"block":"none";
            }
        }
    }
}




</script>
</head>
<body>
<div>
<table width="613" border="0" cellpadding="2" cellspacing="1" >
   <thead id="trHeader">
   <tr>
    <td width="40" 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>
   </thead>
   <tbody id="SignFrame" bgcolor="#96E0E2">
   </tbody>
</table>
</div>
<div>
<input type="button"  value="添加参与人" οnclick="AddSignRow()" />
<input type="button"  value="清空" οnclick="ClearAllSign()" />
<input type="button"  value="删除所有" οnclick="DeleteAll()" />
<input type="button"  value="隐藏第一列" οnclick="disPlayCell(document.getElementById('SignFrame'),0,0)" />
<input type="button"  value="显示第一列" οnclick="disPlayCell(document.getElementById('SignFrame'),0,1)" />
</div>

</body>

</html>