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

利用javaScript动态增加表格行，删除表格行

2010-03-01 18:32 731 查看
示例：
- - - - - - - - - - - -
<body>
<input type="button" value="create" onclick="createTr();">
<table border='1' id="t" >
</table>
<input type="button" value="提交" onclick="okss();" />
</body>

<script type="text/javascript">
function createTr()
{
var tab = document.getElementById("t");
//create tr
for(var j=0;j<3;j++) {
var tr = tab.insertRow();
//create td
var td1 = tr.insertCell(0);
td1.innerHTML = "test"+j;
var td2 = tr.insertCell(1);
td2.innerHTML = "<input type='text' id='td_"+j+"' class='input' size='5' >";
var td3 = tr.insertCell(2);
td3.innerHTML = "<input type='button' value='删除' class='button_2008' onclick='deleteRow(this);'>";
}
}
//del row
function deleteRow(btn){
var tr = btn.parentNode.parentNode;
t.deleteRow(tr.rowIndex);
}
//submit
function okss()
{
var ss = document.getElementById('td_0').value;
var ss1 = document.getElementById('td_1').value;
var ss2 = document.getElementById('td_2').value;
alert("----"+ss+"/t"+ss1+"/t"+ss2);
}
</script>

- - - - - - - - - - - -

利用javaScript动态增加表格行，删除表格行
<!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()函数可以在传入得参数前插入一个表格行，
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航