 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 动态插入、添加删除表格行的JS代码 |
| 来源：源码爱好者 更新时间：2011/4/4 3:21:03 阅读次数： 我要投稿 |
|
<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>
</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>
</body>
</html> |
| 特效说明： |
Js模拟的Windows上下文右键菜单代码，技术上没什么难的，就是定义一个隐藏的box，当触发上下文事件时显示它，当单击bod动态插入、添加删除表格行的JS代码，在表格的指定位置插入一个新行，也可以删除行。 y任意处时又隐藏它。此类菜单平时，大家应该见到过。 |
|
| 上一篇文章： CSS 仿Excel表格功能下一篇文章： Js动态对齐表格内的内容 |
|
|
|
注册 登录
