setAttribute("属性名","属性值")
用insertRow()添加行
insertCell()添加列
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>增加Table行</title>
</head>
<script>
function addRow(obj)
{
//添加一行
var newTr = testTbl.insertRow()
//添加两列
var newTd0 = newTr.insertCell()
var newTd1 = newTr.insertCell()
//设置列内容和属性
newTd0.innerHTML = '<input type=checkbox id="box4">'
newTd1.innerText= '新加行'
}
</script>
<body>
<table id="testTbl" border=1>
<tr id="tr1">
<td ><input type=checkbox id="box1"></td>
<td id="b">第一行</td>
</tr>
<tr id="tr2">
<td ><input type=checkbox id="box2"></td>
<td id="b">第二行</td>
</tr>
<tr id="tr3">
<td ><input type=checkbox id="box3"></td>
<td>第三行</td>
</tr>
</table>
<br />
<input type="button" id="add" onClick="addRow()" value="Add Row" />
</body>
附1：<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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）