<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312"/>
<title>动态添加删除表格</title>
<Script Language="Javascript">
var cGetRow=-99999
function AddRow()
{
//添加一行
var newTr = tab1.insertRow()
//添加两列
var newTd0 = newTr.insertCell()
var newTd1 = newTr.insertCell()
//设置列内容和属性
newTd0.innerHTML = '<input type=checkbox id="box4" on Click="GetRow()">'
newTd1.innerText= '新增加行'
}
function DelRow(iIndex)
{
//删除一行
if(iIndex==-99999)
alert("系统提示：没有选中行号!")
else
tab1.deleteRow(iIndex)
}
function GetRow()
{
//获得行索引
//两个parentElement分别是TD和TR哟，rowIndex是TR的属性
//this.parentElement.parentElement.rowIndex
cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex
}
function ShowRow()
{
//显示行号
alert(cGetRow)
//alert(document.getElementsByTagName("tr").length)
}
</script>
</head>
<body>
<table id="tab1" border=1>
<tr id="tr1">
<td width=6%><input type=checkbox id="box1" on Click="GetRow()"></td>
<td id="a">第一行</td>
</tr>
<tr id="tr2">
<td width=6%><input type=checkbox id="box2" on Click="GetRow()"></td>
<td id="b">第二行</td>
</tr>
<tr id="tr3">
<td width=6%><input type=checkbox id="box3" on Click="GetRow()"></td>
<td id="c">第三行</td>
</tr>
</table>
<input type="submit" name="Submit" value="AddRow" on click="javascript :AddRow()">
<input type="submit" name="Submit" value="DelRow" on click="javascript :DelRow(cGetRow)">
<input type="submit" name="Submit" value="ShowRow" on click="javascript :ShowRow()">
</body>
</html>
附 2：
<HTML>
<HEAD>
<script LANGUAGE="JAVASCRIPT">
iIndex = 0//试验一下加了int类型定义后如何？？？
var i= 0
function showIndex(){
alert(iIndex)
}
function getIndex(){
iIndex = event.srcElement.parentElement.parentElement.rowIndex
return iIndex
}
function insertRow(iPos){
var otr=myTable.insertRow(i)
var ocell=otr.insertCell(0)
ocell.innerHTML="<input type=file name=aa >"
var ocell=otr.insertCell(1)
// ocell.innerText="bb"
ocell.innerHTML=" <input type=button onclick=deleteRow(getIndex()) value='删除"+ i +"'>"
i++
}
function deleteRow(iPos){
document.all.myTable.deleteRow(iPos)
i--
}
</SCRIPT>
</HEAD>
<BODY>
<table id="myTable" border=1 width=600 >
</table>
<form>
<input type=button onclick="alert(iIndex)" value="show Index">
<input type=button onclick="insertRow(0)" value="插入行">
</form>
</BODY>
</HTML>
附 3：
<script>
function deleteRow (tableID, rowIndex) {
var table =document.all[tableID]
table.deleteRow(rowIndex)
}
</script>
<table id=mxh border=1>
<tr>
<td>第1行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
<tr>
<td>第2行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
<tr>
<td>第3行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
<tr>
<td>第4行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
</table>
<HTML>
<HEAD>
<script LANGUAGE="JAVASCRIPT">
iIndex = 0//试验一下加了int类型定义后如何？？？
function showIndex(){
alert(iIndex)
}
function getIndex(){
iIndex = event.srcElement.parentElement.rowIndex
}
function insertRow(iPos){
var otr=myTable.insertRow(iPos)
var ocell=otr.insertCell(0)
ocell.innerText="aa"
var ocell=otr.insertCell(1)
ocell.innerText="bb"
}
function deleteRow(iPos){
document.all.myTable.deleteRow(iPos)
}
</SCRIPT>
</HEAD>
<BODY>
<table id="myTable" border=1>
<tr onclick="getIndex()">
<td>1</td>
<td>2</td>
</tr>
<tr onclick="getIndex()">
<td>1</td>
<td>2</td>
</tr>
</table>
<form>
<input type=button onclick="alert(iIndex)" value="show Index">
<input type=button onclick="insertRow(iIndex)" value="插入行">
<input type=button onclick="deleteRow(iIndex)" value="删除行">
</form>
</BODY>
</HTML>
在他的父级标签上加个样式属性：text-align:center以下为简例，居中可以理解为，文本内容或者文本元素在指定范围内居中显示，这些都是样式排版基础，你可以上w3school多学习下
<td align=center><input type="button" name="按钮一" value="按钮一" /></td>
<div style="text-align:centerwidth:200px"><input type="button" name="按钮一" value="按钮一" /></div>
var tab =document.getElementById("table的id")var newRow = tab.insertRow()//添加了一行
删除：
var tab =document.getElementById("table的id")
tab.deleteRow(要删除的行的索引)//当然table中的行索引是从0开始的！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）