您的位置：首页 > Web前端 > JavaScript

js 操作table

2016-03-10 09:17 405 查看 
</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='删除' onclick='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='删除' onclick='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="添加参与人" onclick="AddSignRow()" />
<input type="button"  value="清空" onclick="ClearAllSign()" />
<input type="button"  value="删除所有" onclick="DeleteAll()" />
<input type="button"  value="隐藏第一列" onclick="disPlayCell(document.getElementById('SignFrame'),0,0)" />
<input type="button"  value="显示第一列" onclick="disPlayCell(document.getElementById('SignFrame'),0,1)" />
</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航