分享

利用javaScript动态增加表格行,删除表格行 - 梦源 - BlogJava

 昵称21476 2007-04-19
<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()函数可以在传入得参数前插入一个表格行,

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多