欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

利用javascript动态增加表格行,删除表格行 - mengyuan760

更新时间: 2015-05-04 00:00:00 责任编辑: Author_N14

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Table 对象得方法 </TITLE>
<script language="JavaScript">
var intRowIndex = 0;
function insertRow(tbIndex)
{
 var objRow = myTable.insertRow(tbIndex);
 var objCel = objRow.insertCell(0);
 objCel.innerText = document.myForm.myCell1.value;
 var objCel = objRow.insertCell(1);
 objCel.innerText = document.myForm.myCell2.value;
 objRow.attachEvent("onclick",getIndex);
 objRow.style.background = "pink";
}

function deleteRow(tbIndex)
{
 myTable.deleteRow(tbIndex);
}
function getIndex()
{
 intRowIndex = event.srcElement.parentElement.rowIndex;
 pos.innerText = intRowIndex;
}
</script>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY onload="pos.innerText=intRowIndex;">
<h2>Table对象得方法</h2>
<hr>
当前位置:<span id="pos"></span>
<table id="myTable" border=1>
<tr onclick="getIndex()">
<td>HTML</td>
<td>Css</td>
</tr>
<tr onclick="getIndex()">
 <td>JavaScript</td>
 <td>VBScript</td>
</tr>
</table>
<form name="myForm">
第一栏:<input type="text" name="myCell1" value="CGI"><br>
第二栏:<input type="text" name="myCell2" value="ASP"><br>
<input type="button" onclick="insertRow(intRowIndex)" value="插入行">
<input type="button" onclick="deleteRow(intRowIndex)" value="删除行">
<input type="button" onclick="insertRow(myTable.rows.length)" value="添加行" >
</form>
</tr>
</BODY>
</HTML>

intRowIndex是全局变量,记录鼠标选择得行。insertRow()函数可以在传入得参数前插入一个表格行,

上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2015-05-04 00:00:00
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1712657/
本文WWW.DOC100.NET DOC100.NET版权所有。